Why does the margin space between stacked HTML block elements collapse instead of each element asserting its own margin space?

Question

Let's say you have two <p> elements, one stacked on top of the other, and each with 3rem of top and bottom margin.

With this set up, I expect there to be a total of 6rem of white space between the two <p> elements (3rem from the top <p>'s bottom margin, plus 3rem from the bottom <p>'s top margin). However, there is only 3rem of white space between the elements.

Why does the margin space collapse between the block elements instead of each block element holding on to its own margin space?

---

Here is a codepen that illustrates the problem of collapsed margin space between two paragraphs.

The html of the above codepen example is:

<p class="outline-red">This is a paragraph with top &amp; bottom margin and padding set at 3rem.</p>
<p class="outline-yellow">This is a paragraph with top &amp; bottom margin and padding set at 3rem.</p>

The CSS of the above codepen example is:

body { 
  margin: 0;
  padding: 0 3rem;
  background-color: #34495e;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  color: white;
}

.outline-red,
.outline-yellow {
  display: block;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.outline-red { border: 1px solid red; }

.outline-yellow {border: 1px solid yellow; }

Answer 1

The short answer is, "because that's what the spec says".

But I guess what you're really asking is why does the specification work that way. And I believe it has to do with the semantic difference between margins and padding:

• Padding is part of the element, not to be shared with other elements.

• Margin is not part of the element, but is space shared with other elements.

For example, element backgrounds cover the padding, but do not extend into the margin. Mouse events over the padding are delivered to the element, but events over the margin are not. Etc.

Answer 2

MDN: Thats just the way it is

• the padding property does not collapse.
• the margin property vertically (top and bottom) collapses.

CSS 2.1 - 8.3.1 Collapsing margins: In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

---

Exceptions: float, inline-block, etc.

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
• Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
• Margins of inline-block boxes do not collapse (not even with their in-flow children).
• ...

Answer 3

The second margin-top doesn't care about the first margin-bottom space, it only cares about the first <p> element. So the count starts from the position of the first <p> element (without margins).