Login
  • CSS
  • Margin Collapse

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

Demonstration of margin collapse:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

In the example above, the

element has a bottom margin of 50px and the

element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the

and the

would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.

Test Yourself With Exercises

Exercise:

Add a 20 pixels left margin to the


All CSS Margin Properties

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

Margin Collapse
Login
ADS CODE