CSS Margin Collapsing: The Largest Margin Wins

Why it exists

Margin collapsing was designed to create consistent vertical rhythm in documents. Without it, the space between a heading and a paragraph would be an unpredictable sum, leading to clunky typography. It ensures the space between elements is based on the largest required gap, not the sum of all gaps.

The mental model

Think of vertical margins not as rigid spacers but as requests for space. When two requests meet, the layout engine grants only the largest one. If one element asks for 16px of space below it, and the next asks for 24px above it, the browser provides a single 24px gap between them, not a 40px one.

How it works

Collapsing happens in three main scenarios. First, between adjacent sibling elements, like two paragraphs one after the other. Second, between a parent and its first or last child element if there is no border, padding, or inline content to separate them. Third, for empty blocks with no border, padding, or height, their top and bottom margins collapse into one. The size of the collapsed margin is the largest of the margins involved. It only affects vertical (top and bottom) margins.

When to use it

You don't actively "use" margin collapsing; you design layouts knowing it will happen. It is the default behavior for block-level elements in the normal document flow and is essential for creating clean, readable spacing in long-form text like articles or blogs.

When not to use it

You prevent margin collapsing when you need precise, non-negotiable space, which is common in component-based UI. Collapsing is automatically disabled for children of flex and grid containers, which is the modern way to control it. You can also prevent it by adding padding or a border to the parent element, or by creating a new block formatting context (e.g., with overflow: auto).

One canonical example

Two adjacent paragraphs both have the rule p { margin: 1rem 0; }. You might expect 2rem of space between them (1rem from the bottom of the first, 1rem from the top of the second). Instead, their margins collapse, and the resulting space is just 1rem—the value of the largest margin.