css - Cross-browser Issue: Min-height and collapsing margins

Question

As you can see in this simple example:

<div id="minheight">
    <p id="margin">Paragraph with a margin</p>
</div>
<div id="sibling">Sibling div</div>

#minheight {
    min-height: 100px;
    background: red;
}
#sibling {
    background: blue;
}

http://jsfiddle.net/peterbriers/B43th

There is a difference between Chrome (35) and Firefox (29) in how it handles the collapsing margins on a block with a min-height that is larger than the child's margin.

I tried to fully understand the specifications: http://www.w3.org/TR/CSS2/box.html#collapsing-margins , but I'm still unsure which browser handles this correctly. I would say Chrome is in the wrong, but Safari (7) does it the Chrome way too.

Which browser is correct, and how can I file a bug for the one that isn't doing it the right way? BTW: I'm not asking any fix by adding new block formatting context (adding overflow property)...

Answer 1

OK, so this seems to be a very peculiar case.

If you change min-height to height, the gap disappears in Chrome. Not only does Safari behave the same as Chrome, but so does IE. Firefox's behavior is unique to itself, and its behavior does not change when you make that adjustment to your CSS. This should come as a surprise, as you would not expect min-height and height to behave any differently in your given scenario.

However, the spec has something interesting to say about min-height with respect to margin collapsing:

The following algorithm describes how the two properties influence the used value of the 'height' property:

[...]

These steps do not affect the real computed values of the above properties. The change of used 'height' has no effect on margin collapsing except as specifically required by rules for 'min-height' or 'max-height' in "Collapsing margins" (8.3.1).

Because you have not specified a fixed value for the height property on the same element that has a min-height, the computed value for height remains the default auto, even though the used value is floored to min-height.

Therefore the following text from section 8.3.1 applies, and the margins between the block box and its child should collapse as a result, irrespective of min-height:

Two margins are adjoining if and only if:

• 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

Note that it goes on to list some scenarios in which margins may or may not collapse:

Note the above rules imply that:

• ...
• 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 it does not state what happens when the block box has height: auto and a non-zero min-height.

Based on this, it would be safe to assume that the spec should be interpreted as I am doing. Therefore it looks like Firefox is not behaving quite correctly, and all other browsers are following the spec to the letter, despite what one might expect from the behavior of height and min-height.

You can file a bug for Firefox here, although it looks like the developers have already made themselves aware of this issue.