CSS

Margin Collapsing in CSS: What It Is and How to Handle It

Tuesday October 7, 2025

In CSS, margins help create space between elements. But when two vertical margins meet—like between a heading and a paragraph—they don’t stack the way you expect. Instead of adding up, they collapse into a single margin. This is known as margin collapsing.

It can be confusing, especially if you’re expecting a layout to have more spacing than it actually shows. But once you understand the rules, it becomes easier to work with.

The Basic Idea

CSS vertical margins will collapse when they touch. Instead of adding, the greater margin takes precedence, defining the gap between the elements.

Let’s say you have two elements, one after the other:

In the second div, the two margins (bottom and top) are collapsing. Only the bigger one (margin-bottom:20px;) is applied.
(click on the image to open in a new tab)

You might expect 39px of space between the h1 and the p in the second container. But the browser will only apply 20px, not 39px.

This only happens in the vertical direction—top and bottom—not with left/right margins.

When Does Margin Collapsing Happen?

Margin collapsing happens between block-level elements that are stacked vertically when there’s no border, padding, or content separating the margins.

Margin collapsing can happen even in the case of nested elements (like a child with a top margin inside a parent with no padding).

How to Stop Margins from Collapsing

If you want both margins to apply, you can prevent collapsing by:

Adding padding or borders between the elements

Margins only collapse when there’s no visible separation, so a padding or border stops this.

Here, we see a child h2 inside a parent .container div.
(click on the image to open in a new tab)

And the result on the browser:

Since no padding or border is applied between the two elements, the margin remains innactive.
(click on the image to open in a new tab)

But when we add padding on top of it (even one pixel):

Even a 1px padding prevents collapsing.
(click on the image to open in a new tab)

The result now is as expected:

Now the 30px margin won’t collapse with any parent margin because the padding “interrupts” it.
(click on the image to open in a new tab)

Using overflow: hidden or overflow: auto on the parent

Applying overflow triggers a new block formatting context, which stops collapsing between parent and child.

Overflow: hidden on the outer div keeps the child’s margins distinct, stopping margin collapsing.
(click on the image to open in a new tab)

Adding display: flow-root to the parent

This is a modern, clean solution. flow-root also creates a new formatting context, similar to overflow: hidden, but without clipping content.

display: flow-root prevents margins from collapsing now.
(click on the image to open in a new tab)

Final Thoughts

Margin collapsing is one of those quiet behaviors in CSS that surprises many new developers. It’s not a bug—it’s how the browser avoids stacking vertical margins unnecessarily. Once you understand how it works, you can design layouts more precisely and fix spacing issues with confidence.

Although my blog doesn’t support comments, feel free to reply via email or X.