How would two empty divs with only margins collapse?

Question

How would two empty divs with only margins collapse?

html file:

<div id="div1"></div>
<div id="div2"></div>

CSS File:

#div1 {
  margin-top: 10px;
  margin-bottom: 20px;
}

#div2 {
  margin-top: 10px;
  margin-bottom: 30px;
}

Thanks.

Answer 1

The answer is:

You will have only 30px margin at the end

You are facing two kind of margin collpasing. Since each div is empty, its top margin and bottom margin will collapse so for the first one we will have 20px and for the second one 30px. Then those margin will also collapse together and will end with only 30px.

You can verify this by checking the height of the html element and you will see this:

#div1 {
  margin-top: 10px;
  margin-bottom: 20px;
}

#div2 {
  margin-top: 10px;
  margin-bottom: 30px;
}

<div id="div1"></div>
<div id="div2"></div>

From the sepcification:

top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed 'height', and no in-flow children

And

bottom margin of box and top margin of its next in-flow following sibling

---

As a side note, the body has also a default margin (8px) collapsing with other other margin following this rule:

top margin of a box and top margin of its first in-flow child

And

bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height