CSS Margin Collapse

Margin collapse is when two margins collapse into a single margin.

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

Note: Margin collapse only happens with top and bottom margins! Not left and right margins!

In the following example, the

element has a bottom margin of 50px and the

element has a top margin of 20px. So, 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:

Example

h1 {
  margin-bottom: 50px;
}

h2 {
  margin-top: 20px;
}

In the following example, each

element has a top margin of 30px and a bottom margin of 30px. So, the vertical margin between the

elements should have been 60px (30px + 30px). However, due to margin collapse, the actual margin ends up being 30px:

Example

  p {
  margin-top: 30px;
  margin-bottom: 30px;
}

All CSS Margin Properties