Syllabus

CSS Margin and Margin Collapse

Badar KhalilUpdated September 30, 2026 7 min read

CSS Margin and Margin Collapse: Complete Guide with Examples

The CSS margin property creates space outside an element border. It controls the distance between elements and is one of the most used properties in web design. But margin has a famous quirk called margin collapse, where vertical margins combine instead of adding up. Understanding CSS margin collapse saves hours of layout debugging and is a very common frontend interview question.

What You Will Learn

Margin longhand and shorthand syntax (1, 2, 3 and 4 values)
Centering with margin: 0 auto
Negative and percentage margins
Logical margin properties such as margin-inline and margin-block
The three types of margin collapse and the exact calculation rules
How to prevent collapse with flow-root, flex, grid, padding and gap

Margin Longhand Properties

Set each side separately with margin-top, margin-right, margin-bottom and margin-left.

Margin Shorthand: 1, 2, 3 and 4 Values

margin: 10px; all four sides
margin: 10px 20px; vertical (top and bottom), horizontal (left and right)
margin: 10px 20px 30px; top, horizontal, bottom
margin: 10px 20px 30px 40px; top, right, bottom, left (clockwise, remember TRouBLe)

Centering a Block with margin: auto

A block element with a set width can be horizontally centered using margin-inline: auto (or the classic margin: 0 auto). The browser splits the free horizontal space equally between the left and right margins. It does not work on inline elements, and margin: auto does not center vertically in normal block flow. In Flexbox and Grid, auto margins absorb free space in both directions, for example margin-left: auto pushes a nav button to the far end of the row.

Negative Margins

Margins can be negative. A negative margin pulls an element toward or over its neighbours, or makes it extend outside its container. Use it sparingly for overlaps and optical alignment, and prefer transforms or Grid placement for complex overlaps.

Percentage Margins

Percentage margins, including top and bottom, are calculated from the width (inline size) of the containing block, not its height. So margin-top: 10% inside a 500px wide parent equals 50px.

Margin on Inline Elements

For inline elements such as span and a, only horizontal margin works. Top and bottom margins are ignored. Use display: inline-block or block when you need vertical margin.

Logical Margin Properties

Use margin-inline, margin-block, margin-inline-start, margin-inline-end, margin-block-start and margin-block-end for direction-aware spacing that works in right-to-left and vertical writing modes.

What Is Margin Collapse?

Margin collapse happens when the vertical margins of two or more block boxes touch. Instead of adding together, they merge into a single margin. Horizontal margins never collapse.

Margin Collapse Calculation Rules

Case	Rule	Example
Both positive	The larger margin wins	40px and 30px give 40px
Both negative	The most negative wins	-20px and -10px give -20px
One positive, one negative	They are added together	40px and -10px give 30px

The Three Types of Margin Collapse

1. Adjacent Siblings

The bottom margin of one block and the top margin of the next block touch and collapse. A paragraph with margin-bottom: 40px followed by one with margin-top: 30px produces a 40px gap, not 70px.

2. Parent and First or Last Child

If a parent has no padding, no border, no inline content and no clearance between it and its first child, the child top margin collapses through the parent and appears outside it. The parent moves down instead of the child moving inside. The same happens with the last child bottom margin and the parent bottom margin when the parent height is auto.

3. Empty Blocks

If a block has no content, padding, border or height, its own top and bottom margins collapse together, and can then collapse with neighbouring margins.

When Margins Do NOT Collapse

Inside Flexbox or CSS Grid containers (flex and grid items never collapse margins with each other)
On floated, absolutely positioned and fixed elements
On inline-block elements
When a parent has padding, a border, or an overflow value other than visible
When the parent creates a new block formatting context, for example with display: flow-root
Between horizontal margins, always

How to Fix or Prevent Margin Collapse

display: flow-root on the parent: the modern, clean fix with no side effects.
Add a small padding or border to the parent.
Use overflow: auto or hidden (can clip content, so use carefully).
Make the parent a flex or grid container.
Use gap in Flexbox or Grid instead of margins between items.
Use one-directional spacing: only margin-bottom (or only margin-top) on siblings.

Modern Spacing Patterns: gap and the Stack Layout

Many developers avoid margin collapse with gap in Flexbox and Grid, which adds space only between items. Another popular pattern is the stack (also called the lobotomized owl selector): .stack > * + * { margin-block-start: 1rem; }. It adds space only between siblings, so there is no extra space at the start or end. Utility frameworks such as Tailwind CSS use similar ideas with space-y and gap utilities. The newer margin-trim property is designed to trim margins at container edges, but browser support is still limited, so check before relying on it.

Margin vs Padding: Quick Decision Guide

Space between two elements: use margin (or gap).
Space inside an element between content and border: use padding.
Background color behind the space: use padding, because margin is always transparent.

Common Mistakes

Expecting 40px plus 30px to equal 70px between siblings.
Adding margin-top to the first child and wondering why the whole parent moves.
Using negative margins for layout when Grid or Flexbox is cleaner.
Using margin on inline elements to create vertical space.
Setting both margin-top and margin-bottom on every element, creating confusing collapse behaviour.

Frequently Asked Questions

Why is my margin-top not working?

Common causes: the element is inline, the margin is collapsing with its parent, or another rule overrides it. Inspect the element in DevTools.

Do left and right margins collapse?

No. Only vertical margins of block boxes in normal flow collapse.

Does margin collapse happen in Flexbox?

No. Flex items and grid items do not collapse margins.

What is the best way to stop margin collapse?

Use display: flow-root on the parent, or use gap in flex and grid layouts.

Key Takeaways

Margin is outside space and is always transparent.
Vertical margins between blocks collapse: max for positives, most negative for negatives, sum for mixed.
Flex and grid items, floats, absolutely positioned and inline-block elements do not collapse.
display: flow-root and gap are the cleanest modern solutions.

Try it Yourself HTML

<style>
.wrap { background: #f2f3f4; padding: 10px; font-family: sans-serif; }
.b { background: #aed6f1; padding: 10px; }
.m1 { margin: 10px; }
.m2 { margin: 10px 40px; }
.m3 { margin: 10px 40px 20px; }
.m4 { margin: 5px 10px 20px 60px; }
</style>
<div class='wrap'>
  <div class='b m1'>margin: 10px</div>
  <div class='b m2'>margin: 10px 40px</div>
  <div class='b m3'>margin: 10px 40px 20px</div>
  <div class='b m4'>margin: 5px 10px 20px 60px</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.container {
  width: 300px;
  margin: 0 auto;
  padding: 16px;
  background: #d5f5e3;
  text-align: center;
  font-family: sans-serif;
}
</style>
<div class='container'>Centered with margin: 0 auto</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.nav { display: flex; align-items: center; gap: 12px; padding: 12px; background: #2c3e50; color: white; font-family: sans-serif; }
.nav .push { margin-left: auto; background: #1abc9c; border: none; color: white; padding: 8px 16px; border-radius: 6px; }
</style>
<div class='nav'><span>Logo</span><span>Home</span><span>Blog</span><button class='push'>Sign in</button></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.base { width: 200px; height: 80px; background: #aed6f1; padding: 10px; font-family: sans-serif; }
.overlap { width: 200px; height: 80px; background: #f5b7b1; padding: 10px; margin-top: -40px; margin-left: 60px; font-family: sans-serif; }
</style>
<div class='base'>First box</div>
<div class='overlap'>Second box pulled up with a negative margin</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.a { margin-bottom: 40px; background: #fadbd8; padding: 10px; font-family: sans-serif; }
.b { margin-top: 30px; background: #d6eaf8; padding: 10px; font-family: sans-serif; }
</style>
<div class='a'>Box A: margin-bottom 40px</div>
<div class='b'>Box B: margin-top 30px</div>
<p style='font-family:sans-serif'>The gap between A and B is 40px, not 70px.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.row { display: flex; gap: 20px; font-family: sans-serif; }
.col { flex: 1; }
.parent { background: #fcf3cf; }
.child { margin-top: 40px; background: #f9e79f; padding: 10px; }
.fixed { display: flow-root; }
</style>
<div class='row'>
  <div class='col'>
    <p>Collapsing: the margin escapes the parent</p>
    <div class='parent'><div class='child'>Child margin-top: 40px</div></div>
  </div>
  <div class='col'>
    <p>Fixed with display: flow-root</p>
    <div class='parent fixed'><div class='child'>Child margin-top: 40px</div></div>
  </div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.flex { display: flex; flex-direction: column; background: #f2f3f4; font-family: sans-serif; }
.item { margin: 20px 0; background: #abebc6; padding: 10px; }
</style>
<div class='flex'>
  <div class='item'>Item 1 (margin 20px)</div>
  <div class='item'>Item 2 (margin 20px)</div>
</div>
<p style='font-family:sans-serif'>In flex, margins do NOT collapse, so the gap is 40px.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.grid { display: grid; gap: 16px; padding: 16px; background: #eaf2f8; font-family: sans-serif; }
.grid div { background: #85c1e9; padding: 12px; }
</style>
<div class='grid'>
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.stack > * + * { margin-block-start: 1rem; }
.stack > * { background: #d2b4de; padding: 12px; font-family: sans-serif; }
</style>
<div class='stack'>
  <div>Item one</div>
  <div>Item two</div>
  <div>Item three</div>
</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const box = document.createElement('div');
box.style.padding = '1px';
const a = document.createElement('div');
a.style.cssText = 'height:50px;margin-bottom:40px;background:#ccc;';
const b = document.createElement('div');
b.style.cssText = 'height:50px;margin-top:30px;background:#999;';
box.append(a, b);
document.body.appendChild(box);
const gap = b.getBoundingClientRect().top - a.getBoundingClientRect().bottom;
console.log('Gap between siblings:', gap);
box.remove();

Output

Press Run to execute.

Exercise: Compute the Collapsed MarginJAVASCRIPT

Write a function collapsedMargin(a, b) that returns the final vertical gap between two adjacent block siblings with margins a and b. Both positive: return the larger. Both negative: return the most negative. Mixed: return the sum.

Try it Yourself JAVASCRIPT

function collapsedMargin(a, b) {
  // TODO: implement
}

console.log(collapsedMargin(40, 30));
console.log(collapsedMargin(-20, -10));
console.log(collapsedMargin(40, -10));

Output

Press Run to execute.

Show expected output

40
-20
30

This is a self-check — compare your result with the expected output above.

Exercise: Stop the Parent from MovingHTML

The child margin-top escapes the parent, so the yellow parent moves down instead of the child moving inside it. Fix it with one modern CSS property on the parent. Do not add padding or border.

Try it Yourself HTML

<style>
.parent { background: #f9e79f; }
.child { margin-top: 40px; background: #f4d03f; padding: 10px; }
</style>
<div class='parent'>
  <div class='child'>My margin should stay inside the parent.</div>
</div>

Output

Press Run to execute.

Show expected output

Add display: flow-root to .parent; the yellow background now contains the 40px space.

This is a self-check — compare your result with the expected output above.

Was this page helpful?