How do margin collapsing rules work in CSS?

Difficulty: 5/10

margin collapsing, block formatting context, layout debugging

Understanding Margin Collapsing in CSS

In CSS, vertical margins of block-level elements can combine (or 'collapse') into a single margin instead of adding up. This happens when the top margin of one element meets the bottom margin of another element, or when an element’s top and bottom margins touch due to empty content or no border/padding in between.

Example of Margin Collapsing

Key Rules of Margin Collapsing

1
Only vertical margins (top and bottom) collapse; horizontal margins do not.
2
The resulting margin equals the largest of the two overlapping margins, not their sum.
3
Margins of parent and first/last child can collapse if no padding, border, or inline content separates them.
4
Negative margins can affect the collapsed result — they can reduce or even cancel out positive margins.
5
Adding padding, border, or overflow: hidden to the container prevents margin collapsing.

Scenario Questions

0-2 years experience

Follow-up Questions