The Rules Of Margin Collapse | CSS Tips And Tricks
Mastering Margin Collapsing — CSS
What You Should Know About Collapsing Margin In CSS
Collapsing Margins are real and they can be a real pain in the next if Web Designer is not aware of what they are and how they behave. A lot of people really do not understand what they are, what is going on, how they are working. So, in this article, we will discuss Margin Collapsing and understand the scenarios which cause it, including the tips and tricks to know how better we can handle it.
To continue on this article, one must be familiar with CSS Box Model and CSS Selectors. If you are aware of these, let’s GO —
What is Margin Collapse?
Before starting to understand Margin Collapse, let’s get one thing clear —
Margin Collapse does not happen on Horizontal (Left and Right) Margin.
📌 Only one type of Margin can collapse — Vertical (Top and Botton) Margins.
Now let’s talk about what the heck this Margin Collapse is —
If we will directly say that margins will collapse, this will be misleading. The more correct definition would be to say that — the top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
It is like when two things collide, only one will survive. Survival of the fittest. In most of the fights, the biggest guy wins.
Now let’s try to understand this with the help of a visual example — The Bigger Margin Wins
So, the resulting margin between the two elements is 30px.
The Rules Of Margin Collapse —
In real-world projects, all kinds of circumstances can complicate the matter. But the good news is that once we understand the rules behind this confusing mechanism, it becomes a lot clearer and a lot less surprising.
1. Only Vertical Margin Collapse — As we learnt a first thing at the beginning of this article that Horizontal Margins never collapse.
2. Only Adjacent Element Collapse — Elements need to be adjacent in the DOM for their margins to collapse. The <br/> tag is invisible and empty, but any other elements between two others will block margins from collapsing.
3. The Bigger Margin Wins — What about when the margins are asymmetrical? — Here the biggest guy wins as shown below :
4. Nesting Does Not Prevent Collapsing — This is the point from where it starts to get weird and turns out that many of us have a misconception about how margin works.
Margin is meant to increasing the distance between siblings. It is not meant to increase the gap between a child and its parent bounding box; that is what padding is for.
Here in this below example, we have added our first paragraph into a containing <div>, but the margins will still collapse.
Still, there are some cases or conditions which must be satisfied in order for the margin to be transferred to the parent (and collapsed).
- No other elements in between (The previous rule we saw just now about the <br/>)
- The parent element does not have a height set.
- The parent element does not have any padding or border along the relevant edge. For this condition, an example is shown below.
We can think of padding or border as a sort of wall, if it sits between two margins, they cannot collapse, because there is a wall in the way.
Here the nested child cannot combine margin with the next paragraph, because the parent has some border (in between) in the way.
5. Margins Can Collapse In The Same Direction — So far, in all the examples we have seen the bottom of one element overlaps with the top of the next element. Surprisingly, margins can collapse even in the same direction.
Here, in this example, the child margin is getting absorbed into the parent margin (with the rule that the biggest one wins).
The next example is a big surprise — here we might expect the two sections to be touching since the <section> have no margin at all, but the 0px margin is still a collapsible margin as it gets combined with the 32px top margin on the paragraph and the bigger one i.e. 32 px margin wins.
6. More Than Two Margins Can Collapse — In the example shown below, there are 4 separate margins occupy the same space.
Margin collapse is not limited to just two margins.
Each sibling has a child that contributes a same-direction margin.
Explanation — Here in this example the space between our header and section has four separate margins competing to occupy that space.
- <header> wants space of 10px below itself.
- The <h1> in the <header> has bottom margin, which collapses with its parent.
- The <section> below the <header> wants 30px space above itself.
- The <p> in the <section> has top margin, which collapses with its parent.
Ultimately the paragraph will have the largest cumulative margin so 40px separates the header and section.
7. Negative Margin — Negative margins actually allow us to reduce the space between two elements. It is actually similar to a positive one, so the size of that space is determined by the most significant negative margin.
In case we have a mix of negative and positive margin in that case the numbers are added together.
For example — the 25px positive margin and the -25px negative margin cancel each other out to have no effect.
8. Multiple Positive And Negative Margins — This rule is actually the “Final Boss” the culmination of all the rules we have seen so far.
If there are more than two margins involved then the below algorithm will be followed —
- Find the largest positive margin.
- Find the largest negative margin.
- Add those two numbers together.
For example, our most significant positive margin is 30px and our most significant negative margin is -20px. Then finally we wind up with 10px of realized margin since we add the positive and negative values together.
To Wrap Up —
- Margin Collapsing is a real thing. Understanding why it happens and when it does not will help you solve any problems it may cause.
- Setting margins in one direction only solves many margin-related headaches.
Final Closing Thoughts —
This collapsing behavior has been the source of margin-related frustration ever since. So, Handling margin collapsing is really a pain, as it actually adds more complexity to the designs without adding the real benefits. There are simpler methods that are easy to use and understand. As margin collapse exists so definitely we have to deal with it, so having a good understanding of what it is, when it happens, and how we can work on it is fundamental in mastering CSS.
HAPPY CSS JOURNEY :)
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
