Question

This might be due to margin collapsing and I know about margin collapsing, at least how it affects adjacent elements, but I don’t understand how it works on nested elements when negative margins are involved.

For example, in this markup and accompanying CSS:

Markup

<div class="parent">
  <div class="child">
    Child 1
  </div>
</div>

<div class="parent">
  <div class="child negative">
    Child 1
  </div>
</div>

CSS

body {
  background: white;
  padding: 45px;
}

.parent {
  border: 1px solid black;
  margin-bottom: 10px;
}

.negative {
  margin-bottom: -1px;
}

Live example here.

When I inspect the height of the second .parent div, I notice it is 1 pixel less than the first one. This has happened because of the negative margin on the .negative element inside it. I had a quick look at W3C and couldn’t find an explanation for this behavior.

Could someone please explain what’s happening here and also provide me with a link to the W3C spec section about it?

Answer 1

This might be due to margin collapsing and I know about margin collapsing, at least how it affects adjacent elements, but I don’t understand how it works on nested elements when negative margins are involved.

Section 8.3.1 has all the details. It also covers the behavior of adjoining margins between nested boxes, as well as negative margins.

However, what you’re seeing here is not the effect of margin collapse because you have negated it with a border: 1px solid black declaration in your .parent rule. That means having a border there prevents your .parent margin from collapsing with your .child.negative margin altogether.

Rather, this is simply how negative margins work. This is covered in various sections of the visual formatting model, but it’s most succinctly and directly addressed in the beginning of Section 11, which summarizes it thus:

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

• …
• A descendant box has negative margins, causing it to be positioned partly outside the box.

So what’s happening here, instead, is:

1. The absolute value of the .child.negative element’s negative margin is subtracted from the .parent element’s actual height (by 1px).

2. As a result, the .child.negative element itself overflows .parent (because its own height is not changed and the default overflow for any div is visible).

3. Since margin collapse does not take effect here, the margin-bottom: 10px in your .parent is unaffected. Note that while any subsequent elements in normal flow will be shifted up by 1px, this is mainly due to the negative margin of your .child.negative element; in other words, a side effect of step 1.

And that’s all there is to it.