- From: Robert Hogan <robhogan@gmail.com>
- Date: Mon, 21 Apr 2014 21:24:54 +0100
- To: www-style list <www-style@w3.org>
- Message-ID: <CAD1xn+Pf3mazZ+OeJn_qQ5Z=rn9mf7COcvX6_zMtBhxXOOAduw@mail.gmail.com>
<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