Carlos Augusto de Medeir Filho

Posted on Oct 24, 2019 • Edited on Mar 21, 2021

Margin Collapse Explained by Images

Introduction

Some of the challenges in developing a website are its layout, legibility, spacing. In those cases, one solution could possibly be a smart use of margin. But, do you really know how the property margin works?

Before moving on, I have a challenge for you.

The solution lies on margin collapse.

This article is organized as follows:

Introduction
Definition
Why?
When?
When not?
Conclusion

Definition

DuckDuckGoing around about Margin Collapse, I have found some definitions about it, here I bring a summary of them.

Accordingly to W3.org, margin collapse is:

"The adjoining margins of two or more boxes can combine to form a single margin.[...] the resulting is called collapsing margin."

A more comprehensive definition is given by CSS-Tricks:

"Collapsing margins happens when two vertical margins come in contact with one another."

The final definition that I bring is given by MDN:

"The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins."

While those definitions do a good job in describing what margin collapse is, bellow I show some cases where this collapse happens.

Why?

Before moving on to the examples, I need to explain why it happens.

One of the reasons that CSS uses margin collapse I found on this article.

The concept of margin collapsing comes from graphic design. There, you have margins to title and subtitles, but when a subtitle comes just after the title you should not double the margins. This is why they developed the concept of collapsed margins and this is why it happens just on vertical margins.

Using the power of margin collapsing, it is easily possible to define
margins to sets of vertical content.

I explain, imagine we had a set of 3 paragraphs with this property.

p {
 margin-top: 10px;
}

<main>
//10px margin
  <p> My First Paragraph </p>
//10px margin
  <p> My Second Paragraph </p>
//10px margin
  <p> My Third Paragraph </p>
//0 margin
</main>

The spacing wouldn't be equally spaced. An easy solution to this lies on the margin collapse.

p {
 margin-top: 10px;
 margin-bottom: 10px;
}

<main>
//10px margin
  <p> My First Paragraph </p>
//10px margin (collapsed)
  <p> My Second Paragraph </p>
//10px margin (collapsed)
  <p> My Third Paragraph </p>
//10px margin
</main>

When?

If there is one thing to remember when you leave this page is that collapsing only happens on vertical margins.

The main scenarios are:

Parent and Descendants

If no border, padding, inline part or clearance separate the margin-top of a parent to his first child, then it is going to collapse.

The same happens with the last child of the parent.

Adjacent Siblings

When there are adjacent siblings, the margin-bottom of the top element collapses with the margin-top of the bottom element. The resulting size is the biggest between the two.

Empty Blocks

The margin-top and margin-bottom of an empty block collapse if there are no padding, border, inline content avoiding it. Also, it does not collapse if the block does not have a height or min-height attribute.

Negative Margins

When it comes to negative margins, the resulting size depends on the signals involved.

Negative + Positive

The resulting size of a negative margin and a positive margin is their algebric sum.

Negative + Negative

When both margins are negative, the resulting size is similar when there are positive + positive. In this, the most negative one wins.

When not?

There are many exceptions to the collapsing rule that it would be hard to know it by heart.
Here I show some examples when the margins do not collapse.

Non-Block-Level Elements

Flex Items
Grid Items
Absolutely positioned items
Other non-block-elements

Border or Padding Property on the Parent Element

If there is a border-top or padding-top between the parent and the first-child.

The same happens if there is a border-bottom or padding-bottom between the parent and its last-child.

Horizontal Margins

The horizontal margins never collapse.

Conclusion

Even though it came with the idea of easing our lives, It can be really tricky to deal with margin collapse. This is mainly because of the many rules and exceptions has grown since the invention of it. One possible solution that it is easy to remember and understand is only applying margin-top to the elements. To read more about the possible solutions, Harry Robert discuss more on his article.

Follow me on Twitter and comment down below your thoughts on this.