CSS Styling — Margin Collapsing in Action!!!

CSS Styling — Margin Collapsing in Action!!!

“Oh, No! Where did the margin between the two elements disappear? Did I mess up the margins?”

If you come across face such a scenario, don’t worry! Your margin might have just collapsed.

A few days back while going through CSS, I came across a very interesting topic called Margin Collapsing and thought of sharing my understanding of it. So, let’s dive into it.

What is Margin Collapsing in CSS?

Margin collapsing is a behavior of CSS where the vertical margins (margin-top or margin-bottom) of two block-level elements are combined (or collapsed) to one, i.e, to the margin of the element with the larger value.

Now that’s much on theory. So, lets delve into the 3 basic use-cases as mentioned in MDN web docs, to understand where this behavior comes into action:

1. Collapsing of margins between two vertically adjacent siblings.

Let’s assume that we have 4 block elements aligned vertically with some margin in between them as configured below.

.first-block{
  margin-bottom: 25px;
}second-block{
  margin-top: 50px;
  margin-bottom: 50px;
}.third-block {
  margin-top: 50px;
  margin-bottom: -25px;
}.fourth-block {
  margin-top: 50px;
}

First let’s try to decode the vertical margin between 1st and 2nd block (adjacent siblings).

As configured, 1st block’s margin-bottom is 25px and 2nd block’s margin-top is 50px. So, ideally speaking the vertical margin between the first and second block should be the sum of both and result in 75px (25px + 50px).

Is it how the calculation is done?

Okay! What does actually happen?

What happens is that the vertical margin which has smaller value collapses into the one with the largest value in between the two adjacent elements.

Let’s put the above logic into a formula as mentioned by Geoff Graham in his blog

Therefore, the vertical margin between two blocks results in 50px (margin-top value of second-block as it’s the larger margin) than earlier calculated value of 75px.

Margin collapsing: : Adjacent Siblings with Positive Margins (Sketch by me)

Similarly, vertical margin between 2nd and 3rd block results in 50px (if that’s the value you guessed, kudos you got that right!!). But, it’s difficult to guess which margin collapses on the other, as both have the same value.

Margin collapsing: Adjacent Siblings with Equal Margins (Sketch by me)

Let’s move on to the final set of siblings (3rd and 4th block). Here we can observe that a negative margin has been mixed up with a positive one. And as per the logic, the bigger margin is 50px and is the total vertical margin. But to my surprise the total vertical margin was 25px!

The first that question popped into my mind was “ How did vertical margin between the 2 blocks end up being 25px than 50px?”

Upon research I found, when a negative margin is mixed with a positive one, there is a notable impact on vertical margin between the blocks and resultant margin is equivalent to the sum of the positive and negative margin.

50px + (-25px) = 25px

Next question “Why add them?”

My understanding exclusively for this case is that, the total vertical margin is the spacing from border-bottom of the 1st block till the border-top of the 2nd block. And, as the negative margin creates a negative spacing between 2 elements, that’s why we need to add them to get total vertical margin

Consequently, reducing the margin between the blocks.

After the above understanding the final question that came to my mind is that “Do the margins get collapsed or not?”

Yes, it does get collapsed, but to a reduced vertical margin.

Margin collapsing: Adjacent Siblings with mixed (-ve and +ve) margins (Sketch by me)

Checkout the above use-cases of margin collapsing in action in the below pen

Checkout here – https://codepen.io/siddkar/pen/QYyEPP

One last scenario “What if both the adjacent siblings have negative margins?”

The logic in this scenario is equivalent to that where both the margins are positive. The only change being that the total vertical margin is collapsed to the largest negative margin value among the two blocks.

Please let me know for a working demo, in the comments section down below.

2. Collapsing of margins between parent and first/last child

As per MDN web docs, if there is no separation between

  • margin-top of the block from margin-top of its first child, or
  • margin-bottom of the block from the margin-bottom of its last child

then these margins collapse and end up outside the parent.

What kind of separation are we talking about here? Something that can separate the margin-top or margin-bottom of a block from its first or last child respectively.

Separate the margin-top by introducing border, padding, inline content, block formatting context, or clearance.

Similarly separate the margin-bottom by introducing border, padding, inline content, heightmax-height or min-height.

Collapsing of margins (margin-top) between parent and nested children (sketch by me)

The above sketch emulates the collapsing of margins (margin-top) between the parent and first child and then again its child and so on (nested).

Go ahead and try to emulate the collapsing of margins (margin-bottom) between the parent and last child block. (Hint: Its already there, just spot it)

I would also suggest going through the explanationprovided by Blake Mann.

And also checkout the above use-case in action in the below pen

Checkout here – https://codepen.io/siddkar/pen/aXmJEv

3. Collapsing of margins between empty blocks

I personally feel this use-case is somewhat similar to the previous one that we discussed above.

Let’s say we a parent block, which has two child blocks that are siblings. Now, if a sibling doesn’t have separator (i.e, border, padding, inline content, height or min-height) to separate if from another, then it’s margin-top and margin-bottom collapse.

I would suggest go ahead and create a use-case to emulate it, also let me know about it in the comment section below.


The final question that comes to my mind is “Is margin collapsing a bug in CSS?”

And my answer to that is: NO! This is just how it has been designed to work.

Saying that, do let me know what’s your answer in the comment section below.

Conclusion

Margin collapsing can really be tricky and having understanding of the it can really help get out of those situations.


With this I come to the end of my article. Please kindly let me know if you find any mistakes, that would really help me learn more on margin collapsing.

Did you find this blog useful? If yes, then please do share it

Share this please: