Margin Collapsing

CSS Margin Collapsing

Vertical margins of block elements in normal flow can sometimes combine, or collapse, into a single margin instead of being added together. Understanding margin collapsing helps explain why the vertical space between elements may be different from what their individual margin values suggest.

What is Margin Collapsing?

Margin collapsing occurs when certain top and bottom margins of block elements combine into a single vertical margin. Instead of displaying both margins separately, the browser calculates one collapsed margin.

Margin collapsing applies to vertical margins in specific situations. Left and right margins do not collapse.

Adjacent Vertical Margins

A common example occurs between two block elements in normal flow. When the bottom margin of the first element touches the top margin of the next element, the margins can collapse.

.first {
  margin-bottom: 30px;
}

.second {
  margin-top: 20px;
}

You might expect the space between these elements to be 50 pixels. When the margins collapse, however, the larger positive margin is used, producing 30 pixels of space.

30px bottom margin
20px top margin

Collapsed margin = 30px

Equal Margins

When two adjoining positive margins have the same value and collapse, the resulting margin is that same value rather than the sum of the two margins.

.first {
  margin-bottom: 20px;
}

.second {
  margin-top: 20px;
}

The resulting space between the elements is 20 pixels, not 40 pixels.

Parent and Child Margins

A top margin on a first child can sometimes collapse with the top margin of its parent. Similarly, a bottom margin on a last child can sometimes collapse with the parent's bottom margin.

.parent {
  margin-top: 20px;
}

.child {
  margin-top: 30px;
}

If nothing separates the parent's top margin from the child's top margin, the two margins may collapse. For positive margins, the larger value determines the resulting collapsed margin.

Adding content, padding, or a border between the margins can prevent this type of parent and child margin collapse.

Empty Elements

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

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

If the element has no content, border, padding, height, or other feature that separates its top and bottom margins, those margins can collapse into a single margin.

Negative Margins

Margin collapsing can also involve negative margins. The calculation differs from the simple rule used when all adjoining margins are positive.

.first {
  margin-bottom: 30px;
}

.second {
  margin-top: -10px;
}

When positive and negative margins collapse together, the most negative margin is added to the largest positive margin. In this example, the resulting collapsed margin is 20 pixels.

If all of the collapsing margins are negative, the resulting margin is the most negative value.

When Margins Do Not Collapse

Margins do not collapse in every layout. Horizontal margins do not collapse, and vertical margin collapsing is primarily a behavior of block elements participating in normal flow.

For example, margins between flex items or grid items do not collapse. Margins of absolutely positioned or floated elements also do not collapse with surrounding margins.

Padding, borders, inline content, or other layout conditions can also separate margins that might otherwise collapse.

Try Margin Collapsing

Edit the top and bottom margins in the example to see how adjoining vertical margins combine. Try changing one margin to a larger or smaller value and compare the resulting space between the elements.

Why Margin Collapsing is Important

Margin collapsing can make the vertical distance between elements appear smaller than expected. For example, two adjoining 20-pixel margins do not necessarily create 40 pixels of space.

Recognizing this behavior makes it easier to understand unexpected vertical spacing and avoids adding unnecessary margins while trying to correct a layout.

Summary

Margin collapsing occurs when certain vertical margins of block elements in normal flow combine into a single margin. Adjacent sibling margins, some parent and child margins, and margins of empty blocks can collapse. Positive collapsing margins generally use the largest value, while negative margins follow different calculation rules. Horizontal margins do not collapse.

The next tutorial covers Box Sizing and explains how CSS determines whether padding and borders are added to or included within an element's declared width and height.