[CSS2] Adjoining margins when parent min-height is non-zero

[mstensho]

https://www.w3.org/TR/CSS22/box.html#collapsing-margins

Given the following example:

<div id="parent" style="min-height:200px; background:skyblue;">
  <div id="child" style="height:50px; margin-bottom:100px;"></div>
</div>
<div id="successor" style="height:20px; background:salmon;"></div>

Should the bottom-margin of #child and #parent be considered to be adjoining? All the spec seems to have to say is that "bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height" are adjoining. In this case the height is auto, so then they are adjoining. But it really makes no sense. It's pretty clear that those two margins aren't really adjoining. After all, the bottom margin of #child is in the middle of the border box of #parent, since it's stretched by min-height.

Currently, Chrome and Edge seem to follow the spec, and treat them as adjoining (and you get a white gap between #parent and #successor in the example above), while Firefox doesn't treat them as adjoining. What Firefox does makes a lot more sense, but it's not covered in the spec, as far as I can tell.

See also crbug.com/832016

[mindej]

+1 Here is a small test to demonstrate issue https://plnkr.co/edit/vfqH6Vl6FOY8DS9eRKlp?p=preview

[SelenIT]

It looks that per current CSS2.x edition (incorporating the Errata from 2012) the bottom margins of the box with height: auto; min-height: <non-zero> and its last in-flow child are explicitly meant to collapse:

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.

and in your example the child's bottom margin doesn't collapse with the box's top margin (since the child's height is not zero), so all three conditions are satisfied.

However, this is really very counter-intuitive and sometimes confusing (related issue: #2171), so, given that different implementations already exist, maybe it makes sense to rethink this particular case of margin collapsing?

[mstensho]

I think so. Current spec and behavior in Chrome/Edge make absolutely no sense to me. This isn't margin collapsing - it's margin teleportation. 😀

Thank you for your feedback. I actually think this is a dup of issue #2171 , so I'll just close this one.