CSS Margin Collapse

When two block elements stack vertically, their touching margins don't add together the way you'd expect — the browser collapses them down to just the larger of the two.

In this page:

What Margin Collapsing Is
Why It Only Happens Vertically
Parent-Child Collapsing
What Prevents Collapsing
Collapsing With Flexbox and Grid

What Margin Collapsing Is

When the bottom margin of one block element meets the top margin of the next, the two margins collapse into a single margin equal to the LARGER of the two values, not their sum. A paragraph with margin-bottom: 20px followed by one with margin-top: 30px produces only 30px of visible gap, not 50px.

Example: What Margin Collapsing Is

css

<style>
.first {
  margin-bottom: 20px;
  background: lightblue;
  padding: 8px;
}
.second {
  margin-top: 30px;
  background: lightgreen;
  padding: 8px;
}
</style>
<p class="first">First paragraph</p>
<p class="second">Second paragraph — gap is 30px, not 50px</p>

Why It Only Happens Vertically

Margin collapsing is specific to vertical (top/bottom) margins between block-level elements in normal document flow; horizontal (left/right) margins never collapse and always add up as expected, which is a frequent source of confusion for developers assuming symmetric behavior.

Example: Why It Only Happens Vertically

css

<style>
.left {
  margin-right: 20px;
  background: lightblue;
  padding: 8px;
}
.right {
  margin-left: 30px;
  background: lightgreen;
  padding: 8px;
}
</style>
<span class="left">Left</span><span class="right">Right — gap adds to 50px</span>

Parent-Child Collapsing

If a parent element has no border, padding, or content separating it from its first or last child, the child's margin can collapse straight through the parent and appear outside the parent's own box — a common cause of unexpected spacing above a container.

Example: Parent-Child Collapsing

css

<style>
.parent {
  background: lightyellow;
}
.child {
  margin-top: 40px;
}
</style>
<div class="parent">
  <p class="child">Margin collapses through the parent's top edge</p>
</div>

What Prevents Collapsing

Adding any padding, a border, or an intervening line of content between two margins stops them from collapsing. Setting overflow: auto (or any value other than visible) on the parent also prevents parent-child margin collapse by establishing a new block formatting context.

Example: What Prevents Collapsing

css

<style>
.parent {
  padding-top: 1px;
  background: lightyellow;
}
.child {
  margin-top: 40px;
  background: lightblue;
  padding: 8px;
}
</style>
<div class="parent">
  <p class="child">Padding on the parent stops the collapse</p>
</div>

Collapsing With Flexbox and Grid

Margin collapsing is a normal-flow-only behavior — flex items and grid items never collapse their margins with siblings or the container, which is one reason switching a layout to display: flex or grid can visibly change vertical spacing even without touching any margin values directly.

Example: Collapsing With Flexbox and Grid

css

<style>
.parent {
  display: flex;
  flex-direction: column;
  background: lightyellow;
  padding: 4px;
}
.child {
  margin-top: 40px;
  margin-bottom: 20px;
  background: lightblue;
  padding: 8px;
}
</style>
<div class="parent">
  <p class="child">Margins never collapse inside a flex container</p>
  <p class="child">Second item</p>
</div>

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Margins Next Lesson → CSS Padding