CSS Documentation

Margin

Menu

CSS Margin

CSS margin is used to create space around elements, outside of any defined borders. It's a crucial property for controlling the layout and spacing between elements on a web page.

Margin Properties

  • margin-top: Sets the top margin of an element.
  • margin-right: Sets the right margin of an element.
  • margin-bottom: Sets the bottom margin of an element.
  • margin-left: Sets the left margin of an element.
  • margin: A shorthand property for setting all margin properties in one declaration.

Example

Here's an example of using different margin properties:

.margin-example {
ㅤmargin-top: 10px;
ㅤmargin-right: 20px;
ㅤmargin-bottom: 15px;
ㅤmargin-left: 25px;
}

.margin-shorthand {
ㅤmargin: 10px 20px 15px 25px;
}

Margin and Box Model

Margin is part of the CSS box model, which includes:

  • Content: The actual content of the box
  • Padding: Clears an area around the content (inside the border)
  • Border: Goes around the padding and content
  • Margin: Clears an area outside the border

Margin Collapse

Margin collapse is a behavior where the vertical margins of two adjacent elements can overlap. For example:

.element1 {
ㅤmargin-bottom: 20px;
}
.element2 {
ㅤmargin-top: 30px;
}

In this case, the margin between the elements will be 30px, not 50px.

Best Practices

  • Use consistent margins throughout your website for a cohesive design.
  • Consider using relative units (like em or %) for responsive design.
  • Be aware of margin collapse when working with vertical margins.
  • Use margin to create space between elements, not to position them (use positioning properties for that).
  • Remember that margins are not included in the element's dimensions.

Understanding and effectively using CSS margin is essential for creating well-spaced, visually appealing layouts in web design.