The 6 Must-Know Rules of Margin Collapsing in CSS
Have you come across situations where you applied top and bottom margins on two adjacent elements hoping to get a larger gap but ended up with only one of the margins working?
If you don’t know how this happens, it is because of the magic of Margin Collapsing which may not feel like a magic but more so like a headache sometimes.
Margin collapsing becomes quickly confusing if we do not understand when and how it works. Let’s take a deeper look into margin collapsing and get rid of the headache!
What is margin collapse?
In CSS, adjacent margins can sometimes collapse. They combine into a single margin depending on their values. This is known as margin collapsing
It is important to note that I used the word “sometimes” because not all margins collapse. There may be situations where we expect margins to collapse but they don’t.
Don’t worry it’s really not tricky. There are some rules that it follows which are easy to pick up!
Rules of margin collapse
We will now look at the various scenarios and the rules it follows, going through examples so that margin collapse doesn’t surprise you anymore.
1. Margins collapse in only one direction
Margins collapse only in one direction either horizontal or vertical but not both. Normally, it is always in vertical direction because that is the normal flow of a layout.
If you love exploring CSS, you may already know that it provides us with a property — writing-mode which helps us to change the direction in which block-level elements are stacked.
Using values like vertical-lr or vertical-rl in writing-mode property changes the stacking order to horizontal. Now horizontal margins collapse and not vertical margins.
2. Margins collapse for adjacent elements
Elements should be adjacent for their margins to collapse. It is very common to use a <br/> tag to increase space between elements or to move them to another line. This prevents margins from collapsing.
3. Bigger margin wins
So far in all the examples, I’ve used same margin value (30px) for both elements. What do you think happens when both elements have different margin values?
The bigger margin wins!
Margin collapsing works in the same way for negative margins. The margin with a bigger value wins as you can see in the image below.
When using a negative margin and a positive margin together, they cancel each other out following basics mathematics rule!
4. Margins do not collapse for inline elements
For block-level elements we saw margins collapse in vertical direction, if not changed by writing-mode property. You may now think — okay for block-level elements direction is vertical, so for inline elements like <span> tags margins collapse horizontally, right?
That is not the case. Margins do not collapse for inline and inline-block elements.
In the above image, you can see that horizontal margins do not collapse for inline and inline-block elements and the gap between the boxes remains 60px.
Even if we pair them up with a block-level element, margins still do not collapse.
For inline elements, top and bottom margins do not work. So it makes sense that only the bottom margin from blue box will show.
Inline-block elements allow us to add top and bottom margins. But even when they are paired up with a block-level element, margins do not collapse.
What about other values of display property? We already know margins collapse for block-level elements but not for inline and inline-block. Let’s take a look at other values of display-property.
display: grid : margins collapse for elements with display property set as grid. Just like with block-level elements, when it is combined with inline-block margins stop collapsing.
display: flex : margins collapse for elements with display property set as flex. Here also, when combined with inline-block element, margins do not collapse.
display: inline-flex and display: inline-grid : Just like with inline and inline-block elements, margins do not collapse for inline-flex and inline-grid values.
In short, we can say that margins do not collapse for any of the inline elements.
5. Margins do not collapse for children of flex and grid containers
Margins do not collapse for any of the flex items or children of grid container.
In the above image, all the children are <div> elements but still their vertical margins do not collapse.
For the above image also, all the children are <div> elements but still their vertical margins do not collapse.
6. Margins can collapse between a parent and its child element
So far, we have looked at only adjacent elements but margins can also collapse between a parent and its child.
Suppose we’ve a green box and below it we have a yellow box inside a blue box.
<!-- green box -->
<div class="green"></div>
<!-- blue box is parent -->
<div class="blue">
<!-- yellow box as child -->
<div class="yellow"></div>
</div>Each box is given a height and a margin as follows →
.yellow {
margin-top: 10px;
height: 50px;
}
.blue {
margin-top: 25px;
height: 100px;
}
.green{
height: 35px;
margin-bottom: 10px;
}You might expect to see a gap of 25px between blue box and green box. And a gap of 10px between blue box and yellow box.
Well, we do get a gap of 25px between green and blue boxes but no gap between blue and yellow boxes.
So where did the margin-top from yellow box go? Let’s give a bigger margin value to just the yellow box, say 40px and see what happens.
Now we see a gap of 40px between green and blue boxes.
In both the above cases, margins between yellow and blue boxes collapse to a larger value. This larger value is then compared with the margin from green box leading to the final result.
In first case, 25px from blue box wins against 10px from yellow box. Then this 25px wins against 10px from green box, giving a final gap of 25px.
Similarly in second case, 40px from yellow box wins against 25px from blue and then wins against 10px from green box, giving a final gap of 40px.
Exceptions:
Margins between a parent and a child do not collapse when →
- parent has padding
- parent has a border
- parent has a fixed height which prevents bottom margin from collapsing
Blocked by padding
Giving a padding to parent elements prevents a child element’s margin from collapsing with its parent. It prevents both top and bottom margins.
Blocked by border
Providing a border to a parent element also prevents margin collapsing with its children. It also prevents both top and bottom margins.
Blocked by fixed parent height
Giving a fixed height to a parent element prevents the bottom margin from collapsing with its children. Even if the parent has the same height as its child element, bottom margins do not collapse.
Top margins still collapse. Fixed height does not prevent top margins from collapsing.
All the three exceptions suggest that margins need to be touching for them to collapse between a parent and a child.
That’s it for all the rules. Kudos to you for reaching the end of the article!
Let’s quickly summarize all the rules.
Summary
- Margins collapse in vertical direction ( horizontal when changed via
writing-modeproperty which is rare) - Margins have to be touching for them to collapse. That is elements should be adjacent and not separated by a
<br/> tagor<hr/> tag. - Bigger margin value wins when different values are applied (50px will win against 30px). Same is true for negative margins also where the bigger value wins. (-100px will win against -50px)
- When a negative and a positive margin are used together, they cancel each other out. ( 50px + ( -30px ) = 20px )
- Margins do not collapse for any of the inline elements.
- Margins do not collapse for the children of flex and grid containers.
- Margins can collapse between a parent and its child element but can be prevented when a parent has a border, padding or a fixed height.
Conclusion
Throughout this article, we looked at the various rules and scenarios of margin collapse to understand it better and try to prevent it wherever we can. I hope margin collapse won’t surprise you anymore!
Thank you for reading!! 😊
If you found this article helpful, please click the clap 👏button and feel free to comment down your feedbacks!! I would love to read them and improve. You can also buy me a coffee. For more content around CSS, follow me on Twitter.
