Margin Collapse

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

//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

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!.

Margin Collapse — Structure map

Clickable & Draggable!

Margin Collapse — Related pages: