How does margin collapsing work

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2021-05-16

Why do many people view margin collapsing as helpful?

The whole point of the margin is to say "leave at least this much space between this and the next element".

You might define how much space a <p> needs on top and bottom. Let's say 28px, a nice spacious amount between paragraphs. Now when a <p> is followed by another <p>, you don't want both their margins to be added, because that would be too much. You could, of course, just set a margin-bottom, but then you risk that whatever OTHER (non-p) element might come before a paragraph could "touch" it without any margin, which will look ugly.

Two types of margin collapse

1. Adjacent:

Here we have two adjacent elements in the DOM:

<p></p>
<h1></h1>

Now look at this CSS

h1 {
  /* top: 40px; bottom: 25px margin*/
  margin: 40px 0 25px 0;
  border: 1xs solid:
  background: #cfc;
}

p {
  /*top: 20px bottom: 0px*/
  margin: 20px 0 0 0;
  background: #cf9;
}

How much margin between the p and the h1? 40px, the larger of the two.

(FYI: The presence of borders or padding has no effect on collapsing margins for adjacent elements.)

2. Descendant:

Collapsing margins between parent and child elements

The p element is a child of the div:

 <h1>Heading Content</h1>
 <div>
    <p>Paragraph content</p>
 </div>

Here, by contrast, any borders or padding prevents margin collapsing from happening between descendant tags.

h1 {
  margin: 0;
  background: #cff;
}

div {
  margin: 40px 0 25px 0;
  background: #cfc;
}

p {
  margin: 20px 0 0 0;
  background: #cf9;
}

As it stands, this also collapses the margin and we get 40px between h1 and div (instead of the sum: 60px).

But: If we add border: solid black 1px; to the div, it brings total margin up to 60 again - i.e. there is no collapsing. This is because the div surrounds the p element and therefore the border has to be placed after the 20px of margin appears.

Careful: Edge Cases where collapsing does not happen

References