Margin collapse: the complete rules

What margin collapse is

When two vertical margins touch, they don't add together — they overlap. The larger margin wins. A <p> with margin-bottom: 1rem followed by an <h2> with margin-top: 2rem produces 2rem of space between them, not 3rem. This is margin collapse, and it only happens in the block direction (vertical in horizontal writing modes).

When margins collapse

Three scenarios trigger collapsing:

• Adjacent siblings: the bottom margin of one element and the top margin of the next.
• Parent and first/last child: if nothing separates a parent's top margin from its first child's top margin (no border, padding, or content), they collapse together.
• Empty elements: if an element has no height, padding, border, or content, its own top and bottom margins collapse with each other.

When margins don't collapse

Margins never collapse in these contexts:

/* Flex and grid children — no collapsing */
.flex-parent { display: flex; flex-direction: column; }
.grid-parent { display: grid; }

/* Floated or absolutely positioned elements — no collapsing */
.floated { float: left; }
.absolute { position: absolute; }

/* Elements with overflow other than visible */
.overflow { overflow: hidden; /* or auto, scroll, clip */ }

/* Elements with border or padding between parent and child */
.parent { padding-top: 1px; /* breaks parent-child collapse */ }

The practical takeaway: display: flex and display: grid eliminate margin collapse entirely. If you use modern layout for your page structure, you mostly don't encounter it.

Preventing collapse when you need to

If you're in a block formatting context and need to prevent collapse:

• Add padding-top: 1px or border-top: 1px solid transparent to break parent-child collapse.
• Use overflow: hidden on the parent (creates a new block formatting context).
• Switch to display: flow-root on the parent — this creates a new BFC without side effects.
• Use gap instead of margins in flex/grid contexts.

Negative margins and collapse

When one margin is negative, the result is the sum (positive + negative). When both are negative, the larger absolute value wins. This behavior is consistent but rarely intentional — avoid relying on negative margin collapse for spacing.