W3C home > Mailing lists > Public > www-style@w3.org > April 2014

[css2] Margin-Collapsing and min-height

From: Robert Hogan <robhogan@gmail.com>
Date: Mon, 21 Apr 2014 21:24:54 +0100
Message-ID: <CAD1xn+Pf3mazZ+OeJn_qQ5Z=rn9mf7COcvX6_zMtBhxXOOAduw@mail.gmail.com>
To: www-style list <www-style@w3.org>
<style>
    .red{
        background: red;
        float:left;
    }

    .blue{
        background: blue;
        min-height: 60px;
    }

    h1{
        margin: 10px 0 90px;
        background: green;
        font-family: 'Garamond';
        font-size: 16px;
    }
</style>
<div class="red" data-expected-height=70><div
class="blue"><h1>¡Hola!</h1></div></div>

Chrome, Safari, IE and Presto all render the red float in this test case as
90px in height. FF is alone in allowing it to get 'swallowed' by the height
of the blue parent.

This is because they allow the bottom margins of h1 and its blue parent to
collapse together.

http://www.w3.org/TR/CSS2/box.html#collapsing-margins says: "the bottom
margin of a last in-flow child and bottom margin of its parent [adjoin] if
the parent has 'auto' computed height". Since that is the case here, they
collapse.

Intuitively, since min-height has the effect of creating enough space for
the margin, it would not collapse with its parent's after-margin but there
is no support for that elsewhere, and
http://www.w3.org/TR/CSS2/visudet.html#min-max-heights explicitly rules it
out:

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

The tentative used height is calculated (without 'min-height' and
'max-height') following the rules under "Calculating heights and margins"
above.
If this tentative height is greater than 'max-height', the rules above are
applied again, but this time using the value of 'max-height' as the
computed value for 'height'.
If the resulting height is smaller than 'min-height', the rules above are
applied again, but this time using the value of 'min-height' as the
computed value for 'height'.

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)."

So can the behaviour be improved or should it remain as it is? Am I right
in thinking the rendering in WebKit/IE/Presto is correct per the spec?

https://code.google.com/p/chromium/issues/detail?id=362427
Received on Monday, 21 April 2014 20:25:30 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:21 UTC