Negative Margins Deserve Better Documentation
PPK has taken a close look at negative margins, a topic he says is shockingly under-documented across the web. Even our own CSS-Tricks almanac entry on margins doesn’t address them — a gap that we’ll be working to close.
He highlights what he considers the most common use case:
You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.
From personal experience, negative margins can feel intuitive — but they’re riddled with quirks. They might shift the element itself (for instance, pulling it left) or push other elements (like moving them up). To complicate things further, negative margins have a hand in margin collapsing, which is already tricky to reason about.
Given how directionally sensitive this all is, it’s probably wise to explore negative margins with logical properties in mind.
