CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Amandeep Pasricha
Amandeep Pasricha
14,931 Points

Should the heading margin be interfering with the bottom margin edge of the body?

Vertical margin collapse usually occurs with a top margin interferring with a bottom margin, so why did he say top margin of body, vs the bottom?

1 Answer

Steven Parker
Steven Parker
204,000 Points

There's two common kinds of margin collapse. Sibling collapse occurs between items positioned one over the other, involving the the bottom margin of the upper element and the top margin of the lower one.

Parent/child collapse occurs between an inner element and it's container, where both top margins (and/or both bottom margins) are merged together.

And there's actually a rare third case where the top and bottom margins of a single element merge when it has no content.

For more details, see the MDN page on Mastering margin collapsing.