Please note: There are prerequisites to understanding the content of this article. You must first understand the CSS Box model, and CSS selectors. If you get those, continue on.
What the Heck is Margin Collapse?
Before we talk about margin collapse and what it is, let’s get one thing clear. Only one type of margin can collapse: Vertical (top and bottom). Margin collapse never applies to horizontal (left and right) margins.
Now, let’s talk about what this whole “collapse” thing is. Saying that margins can collapse is a little bit misleading. It’s more accurate to say that they duke it out like Highlanders: When two collide, only one will survive. In other words, when two elements are next to each other on a page (top/bottom), one of the elements might lose its vertical margin. Oh… And, like most fights, the biggest guy wins.
Let’s look at a visual example (modified graphics courtesy of Ire Aderinokun).
Element A has a bottom margin of 10px. Element B has a top margin of 30px. 30px is the bigger margin, so the resulting margin between the two elements is 30px. (Note: If the margins of Element A and Element B were the same, say 30px each, the resulting margin would be 30px).
Why do Margins Collapse Anyway?
You may be saying to yourself: What is all this craziness? Why do margins have to collapse at all? Wouldn’t it be much simpler if they didn’t? Probably. However, agree with it or not, there is some “reason” behind all this kookiness. It all has to do with being able to style sets of elements on a page.
Collapsing margins are designed to make it easy to define vertical margins for *sets* of content.
Let’s look at an example.
Let’s say you have a document with a lot of paragraphs, like a blog post. Your post may contain other content besides paragraphs — images, headings, tables, etc. All of that content has to be spaced out so that it is readable. There should be consistent spacing between paragraphs, images, headings and so on.
To make the spacing consistent between paragraphs, we can define some simple CSS. It might look like this:
p {
margin-top: 10px;
}
With this rule applied, every paragraph is going to have 10 pixels separating it from whatever is above it by 10 pixels. Because we’ve only set the top margin, though, the last paragraph in the set will have no margin to separate it from any content below it. For example:
If we want the last paragraphs in the sets of paragraphs on our page to have a 10 pixel bottom margin, we have to find some way of adding a margin-bottom style to those last paragraphs.
We can’t just tell each paragraph to have a margin-top of 10px and a margin-bottom of 10px. The combined margins would result in a margin between paragraphs of 20px — right?
Enter the collapse…
If the margins between paragraphs collapse, your set of paragraphs will have the spacing you want on all sides. Let’s look an example.
First, here’s our CSS:
p {
margin-top: 10px;
margin-bottom: 10px;
}
Now, here’s the resulting content, with collapsed margins:
When the margins collapse, we can define a rule that styles any set of paragraphs on our page to have 10 pixels between them and their surrounding content.
Rules of Margin Collapse
Now that we’ve covered the what and the why, let’s look at the how. My rules of thumb for working with Margin Collapse are:
- Understand the basic concepts, and the main rules.
- Know there are exceptions.
- If you do something, and it doesn’t work the way you think it should, you’ve hit an exception. Consult the specs.
The Basic Concepts
What’s important to know is :
- Margin collapse only happens vertically.
- It only happens to block-level elements — this does not include
inline-blockelements[1]. - It only happens if the elements come in direct contact with each other (they can’t be separated by padding, borders, line boxes, etc, or be in a different formatting context[1]).
- The CSS specification is HUGE. Don’t try to know everything. Learn the high-level concepts and common rules, look things up when you need to, and take it easy on yourself.
Jonathan Harrell has put together some great graphics detailing margin collapse. These graphics are invaluable, because CSS is fundamentally visual, and being able to see how margins collapse helps you understand what’s going on.
Below are three of the most important rules:
The bottom margin of an element collapses with the top margin of its proceeding sibling.
The top or bottom margin of an element collapses when it touches the margin of its first child element.
If an element has no height, padding, or border and all of its children elements’ margins collapse, it will take up no (vertical) space.
There’s no graphic for this, because this kind of element would take up no space.
As I said, there are more rules. If you want to read up on them in more detail, I recommend you visit Jonathan’s site.
It’s All Fun and Games, Until Someone Gets Hurt
OK, so, maybe, if you stretch logic, collapsing margins kind of make a little sense. Sort of. But, as is often the case with stupid solutions that try to solve simple problems, the solution comes back to haunt you. Consider the following code:
// CSS
div {
margin: 0;
padding: 0;
}
p {
margin: 10px 0;
} // HTML
<div>
<p>Some example text.</p>
</div>
One might be led to assume, looking at this code, that the paragraph will have a top margin of 10px. You’d think it would look something like this:
Nope. It looks like this:
What the heck? Well, as noted above, if you have two adjacent elements with no padding, or border, or whatever between them (i.e., their margins touch vertically), the larger margin of the two wins. In this case, the elements are parent and child. The “logic” here is kind of tricky, but bare with me.
- The parent has a margin of 0.
- The child has a margin of 10px.
- 10 is bigger than 0, so…
- The parent div gets the margin of 10px.
That makes total sense… Right?
In Closing…
While many may disagree with me, I find margin collapse to be a pain. It adds a lot of complexity without a lot of benefit. You can easily achieve the same formatting ends provided by margin collapse using other methods that are clearer to manage and easier to understand. That said, margin collapse is not going away. Having an understanding of what it is, when it happens, and how you can work with it is fundamental in mastering CSS.
— — — — — — — — — — — — — —
[1] This footnote is about Formatting Contexts. I know, I know. I didn’t define what a formatting context was. Formatting Context is a whole article in and of itself. And, if you came here from the mention of inline-block elements, you should know they create a new Formatting Context. If you want to know more about Formatting Contexts, read this article.
