Collapsing margins are still a thing in CSS?
If you’re learning CSS, you might have come across the term collapsing margins and wondered, what the heck is that? It’s a lesser-known behavior in CSS that can mess with your layouts if you don’t know how it works.
How Do Collapsing Margins Work?
When two vertical margins from block-level elements touch, instead of stacking, they merge into a single margin—taking on the size of the larger margin instead of adding together.
This behavior prevents double spacing between elements, like paragraphs, headings, or divs. It was essentially the early web’s attempt at a proto-responsive layout system.
For example, if you have:
Instead of a 50px gap (20px + 30px), the space between them will be 30px, because the larger margin takes precedence.
Why Do Collapsing Margins Exist?
Collapsing margins are a result of the CSS Box Model, which defines how elements handle spacing, padding, borders, and margins. The goal is to keep layouts cleaner and more predictable by avoiding unnecessary gaps.
Want to understand the Box Model in detail? Check out our guide on How the CSS Box Model Works.
When Do Margins Collapse?
Margins typically collapse in the following situations:
- Adjacent block elements – When one element’s bottom margin meets another’s top margin, they collapse.
- Empty block elements – If an element has no border, padding, or content, its top and bottom margins may collapse.
- Nested elements – Sometimes, parent and child elements can have their margins collapse when they don’t have padding or borders separating them.
How to Prevent Collapsing Margins
If collapsing margins are messing up your layout, here’s how you can prevent them:
- Use padding instead of margins to create spacing inside an element.
- Add a border (even a transparent one) to force margins to remain separate.
- Use Flexbox or Grid layouts, which don’t collapse margins like traditional block elements do.
For more layout tips, check out our guide on CSS Flexbox vs. Grid: Which One Should You Use?.
Collapsing margins are a built-in behavior of CSS that help simplify layouts but can be confusing if you’re not aware of them. Understanding the Box Model and how margins interact will help you write better, more predictable CSS.
Want more CSS tips? Check out our CSS Basics Guide or head to the official W3C Box Model specs for the full breakdown.