CSS Margin Collapse

Some notes about margin collapse.

What is Margin Collapse?

When think about margin, you can think it as a "personal space". Each object has they own personal space.
For example, we have 2 persons, one named "p1" and another named "p2", each person has 6 feet of space.
When you think about it, 6 feet can be "shared", because it's doesn't violate the 6 feet rule.

Margin works similar, and sometime they can collapse, or overlap. This can lead to surprising behavior if we not understand it correctly.

Rules of Margin Collapse

To understand the rules of margin collapse, we need to consider many cases.

Only vertical margins collapse

For example, we have 2 boxes A and B and place it vertially:

You can see that the distance between 2 boxes is far away, but the distance between the boxes and the container is close.
If we place it vertically, the distance between the boxes will the same as the distance between the container.

That when margin collapse happens, you can try inspect to see the weird behavior.

Only conllapse in Flow Layout

The web have many layout modes, for example: flexbox, grid, positioned layout. But the margin collapse only happens in flow layout.
For example, below is the flexbox layout:

The margin didn't collapse.

Collapse between siblings

There the weird things happen. Try inspect the web to see:

There are many divs between 2 boxes, but somehow the margin collapse still happens. Turns out, the collapse happen for siblings element, even if it means transferring margin to the parent element!
But we do experiment some time margin can use to increase the distance between elements. That because margin collapse only works when the siblings element are touching each other.

There are some example of not touched siblings:

Blocked by <br/>

Putting a <br> between 2 elements and the collapse go away.

The <br/> tag is invisible and empty, but it's still a wall between 2 boxes, so the margin collapse cannot happen.

Blocked by padding or border of parrent

The parent is wrapping around the child, so their padding and border also wrapped the child.
That will create a wall between 2 boxes, and the collapse cannot happen.

Here is the example using border to create a wall between 2 boxes. The same happens with padding.

Blocked by a gap

If we fixed the height of the parent, then the child also cannot touch the sibling.

So we end up with a rule:
Margins must be touching in order for them to collapse.

Bigger margin wins

That for sure, the bigger margin wins. If we think it as personal space, it's make sense.

Same direction margins

Margins can collapse in the same direction too. The child margin get "absorbed" by the parent margin. Then the 2 margins compare to each other, the bigger margin wins.

The green color is the margin of parent element, and it's override the margin top 24px of the child.

More than 2 margins can collapse

It's very hard to visually the collapse when there are more than 2 margins. But it's simply is combine of the above rules.
Try inspect the below example and you will get it.

By combining the margin, the distance between h1 and p is 40px.

Negative margins

This is the one that I used a lot, and you probally used it before.
The negative margin quite simple, a negative margin will pull an element to the opposite direction. If there are the mix between positive and negative margin, the 2 will be added together. Very intuitive.

The box 2 was above box 1 and there is some overlap between them.

That's a lot, I never though I could done that.