How works margin collapsing with min-height?

Question

I've read in the spec this:

The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.

But as for min-height I can't say that the spec tells us the truth. Here's some example:

* {
  margin: 0;
  padding: 0;
}


/*parent with min-height*/
.block {
  width: 500px;
  min-height: 500px;
  background: rgba(4, 127, 214, 1);
  margin-bottom: 10px;
}

.child_1 {
  width: 500px;
  height: 250px;
  background: yellow;
}

.child_2 {
  width: 500px;
  height: 250px;
  background: yellowgreen;
  margin-bottom: 30px;
}

.content {
  width: 100%;
  height: 50px;
  background: pink;
}

<div class="block">
  <div class="child_1"></div>
  <div class="child_2"></div>
</div>

<div class="content"></div>

This example shows us that margins can collapsing with min-height. Am I right?

Temani Afif · Accepted Answer · 2020-11-28T21:53:47.880

That version of the Specification is probably a bit confusing. You can check the updated version (2.2) where the main rule is:

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

...

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

Then the rule you quoted will become:

The bottom margin of an in-flow block box with a 'height' of 'auto' collapses with its last in-flow block-level child's bottom margin, if:

the box has no bottom padding, and

the box has no bottom border, and

the child's bottom margin neither collapses with a top margin that has clearance, nor (if the box's min-height is non-zero) with the box's top margin.

The min-height is no longer there.

As a side note, the rule you quoted is an implication of the main rules listed above where there is nothing about min-height so having a margin collapsing in case of min-height different from auto won't be a surprise for me if it happens (even if it's non intuitive).

UPDATE

A related old question Margin collapsing with floated element, why there is an extra margin added?. It's now an irrelevant one since we cannot reproduce the behavior but margin-collapsing was occuring in all the cases even if the min-height was bigger than the childs height.

I guess the vertically-adjacent box edges is the key to understand what is happening. If a min-height make both elements no more adjacent then no margin collapsing will occur (which is logical), otherwise you will have margin collapsing (like in your example).

How works margin collapsing with min-height?

1 Answers1