CSS Margin Collapsing

Margin collapsing occurs when certain adjoining vertical margins of block elements in normal flow combine into a single margin instead of being added together.

This behavior primarily affects top and bottom margins in normal block layout. Understanding margin collapsing helps explain why the vertical space between elements can sometimes be different from what you might expect from simply adding their margin values.

How Margin Collapsing Works

When adjoining vertical margins collapse, they form one combined margin. With two positive margins, the resulting margin is generally the larger of the two rather than their total.

.first {
  margin-bottom: 40px;
}
.second {
  margin-top: 20px;
}

You might expect these margins to create 60px of vertical space. Because the adjoining margins collapse, the resulting space is 40px, the larger of the two margins.

Adjacent Sibling Margins

A common example of margin collapsing occurs between two block elements that follow one another in normal flow.

.first {
  margin-bottom: 30px;
}
.second {
  margin-top: 50px;
}

Instead of creating 80px of space between the elements, the two margins collapse to 50px.

This behavior can be useful because it prevents vertical spacing from automatically doubling when neighboring elements both have margins.

Parent and Child Margins

Under certain conditions, the top margin of a first child can collapse with the top margin of its parent. Similarly, the bottom margin of a last child can collapse with the bottom margin of its parent.

.parent {
  margin-top: 20px;
}
.child {
  margin-top: 40px;
}

If nothing separates the parent's top margin from the child's top margin, such as a top border, top padding, inline content, or clearance, the margins can collapse together.

This can make it appear as though the child's margin is moving the parent itself rather than creating space inside the parent.

Empty Elements

An empty block element can also have its own top and bottom margins collapse together when nothing separates them.

.empty {
  margin-top: 20px;
  margin-bottom: 40px;
}

If the element has no border, padding, inline content, height, or minimum height separating its top and bottom margins, those margins may collapse.

The collapsed margin can also participate in collapsing with adjoining margins outside the empty element.

Negative Margins and Collapsing

Margin collapsing can also involve negative margins. When positive and negative margins collapse together, the negative value reduces the resulting margin.

.first {
  margin-bottom: 40px;
}
.second {
  margin-top: -10px;
}

In this example, the resulting collapsed margin is 30px.

If all of the adjoining margins are negative, the resulting margin is the most negative value. Because negative margins can move elements closer together or cause overlap, they should be used carefully.

Margins That Do Not Collapse

Margin collapsing does not occur in every layout situation. Some common cases where margins do not collapse include:

Left and right margins do not collapse.
Margins of flex items do not collapse.
Margins of grid items do not collapse.
Margins of absolutely positioned elements do not collapse.
Margins of floating elements do not collapse with surrounding margins.

Because margin collapsing is associated with particular situations in normal block flow, changing the layout method can change how vertical margins behave.

Preventing Margin Collapsing

Sometimes you need adjoining margins to remain separate. The appropriate method depends on which margins are collapsing and the layout you are trying to create.

For parent and child margins, adding padding or a border between the margins prevents them from being adjoining.

.parent {
  padding-top: 1px;
}

Creating a new block formatting context can also prevent margins inside an element from collapsing with margins outside it. One modern technique is:

.parent {
  display: flow-root;
}

Flexbox and Grid layouts also do not collapse the margins of their flex or grid items.

.parent {
  display: flex;
  flex-direction: column;
}

These techniques should be chosen because they suit the layout, rather than adding unrelated CSS solely to change margin behavior.

Margin Collapsing Example

The following example gives the first box a 40px bottom margin and the second box a 20px top margin.

.first {
  margin-bottom: 40px;
}
.second {
  margin-top: 20px;
}

The margins do not add together to create 60px of space. They collapse to 40px. Open the example in the editor and change either margin value to see how the resulting space changes.

Play in Editor