The Rules of Margin Collapse
Josh Comeau covers the concept of margin collapsing:
This idea might sound simple, but if you’ve been writing CSS for a while, you’ve almost certainly been surprised when margins either don’t collapse, or they collapse in weird and unexpected ways. In real-world projects, all kinds of circumstances can complicate matters.
The basic stuff to know:
- Margin collapsing only happens in the block-direction. This is true even if you change the writing-mode or use logical properties.
- The largest margin “wins”
- Any element in between will nix the collapsing (if we’re talking within-parent collapsing, even a bit of padding or border will be the in-between thing and prevent the collapsing, as Geoff noted when he covered it).
But it gets way weirder:
- Margins can collapse even when they aren’t from sibling elements.
- Margins in the same direction from different elements can also collapse.
- Margins from any number of elements can collapse.
- Negative margins also collapse, but it’s the larger-negative number that wins.
- If it’s a bunch of elements all with different margins, you have to basically learn an algorithm to understand what happens and why.
It’s unfortunate that those things happen at all. It can be frustrating for any skill level. These are quirks of CSS that that have to be taught explicitly, rather than feeling like a natural part of a system. Even the CSS working group considers it a mistake:
The top and bottom margins of a single box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
?
I don’t know that margin collapsing causes epic troubles in day-to-day CSSin’, but you gotta admit this is messy at best.
I also think about how it was a thing this year to suggest centering content via CSS grid and plopping all elements into the middle of a three-column grid ala .grid-wrapper > * { grid-column: 2; }. The point being that you still have the full grid to work with, so it’s easier to make one-off elements go full-bleed, edge-to-edge (or otherwise use the space). But when you do that, the elements become grid items and are out of the normal flow, so you won’t get margin collapsing. That used to feel like a strike against this technique, at least to me, since it would be unexpected. But thinking now about how janky margin collapsing is, maybe the avoiding of margin collapsing is yet another advantage of this sort of technique.
Direct Link to Article — Permalink
The post The Rules of Margin Collapse appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
