CSS Margins

In CSS, margins are the space outside an element's border. The margin property is used to set the margin of an element. Margins create space around an element, separating it from other elements on the page.

This element has a margin of 70px.

Shorthand Property:

The margin property can take one, two, three, or four values to set the margins for all four sides of the element in a clockwise order (top, right, bottom, left).

Example

/* One value applies to all sides */
div {
    margin: 10px;
}

/* Two values apply to top/bottom and right/left sides */
div {
    margin: 10px 20px;
}

/* Three values apply to top, right/left, and bottom sides */
div {
    margin: 10px 20px 15px;
}

/* Four values apply to top, right, bottom, and left sides individually */
div {
    margin: 10px 20px 15px 25px;
}

You can click on above box to edit the code and run again.

Output

Individual Properties

You can also set margins individually for each side using margin-top, margin-right, margin-bottom, and margin-left

Example

div {
    margin-top:  10px;
    margin-right:  20px;
    margin-bottom:  15px;
    margin-left:  25px;
}

You can click on above box to edit the code and run again.

Output

Margins are used to control the spacing between elements on a webpage. They play a crucial role in the layout and positioning of elements, helping create the desired visual separation and alignment. Keep in mind that margins collapse under certain circumstances, meaning that the larger of adjacent margins will be used, rather than the sum of them. This behavior can affect the spacing between elements in certain layout scenarios.

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

Example

div {
  width:   300px;
  margin:   auto;
  border:   1px solid red;
}

You can click on above box to edit the code and run again.

Output

This div will be horizontally centered because it has margin: auto;

All CSS Margin Properties

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

CSS Margin Collapse

Sometimes two margins collapse into a single margin.

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

Example

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

You can click on above box to edit the code and run again.

Output

Heading 1

Heading 2

In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.