W3C home > Mailing lists > Public > www-style@w3.org > January 2010

Re: [CSS21] 9.5.2 Effect of adjacent top margin of first in-flow child on clearance

From: Anton Prowse <prowse@moonhenge.net>
Date: Sun, 24 Jan 2010 17:37:48 +0100
Message-ID: <4B5C775C.3040406@moonhenge.net>
To: www-style <www-style@w3.org>
Bruno Fassino wrote:
> consider this test case (online at
> http://www.brunildo.org/test/margin-collapse-clear-child-5.html) which
> in my interpretation confirms that at least Firefox and Safari include
> an adjacent top margin of the first inflow child when deciding the
> clearance:
> 
> <div style="background: lime; border-top: 1px solid">
> 	<div style="float: left; height: 10px; width: 10px"></div>
> 	<div style="clear: left">
> 		<div style="margin-top: 10px"></div>
> 	</div>
> </div>
> <div style="background: yellow">next</div>
>
> In both Firefox and Safari, the lime parent does not expand (has 0
> height) and the following yellow box is 10px below its top border. I
> could explain this with:
> Hypothetical position is taking into account the child margin, so
> there is no need for clearance and there is normal margin collapsing
> (the element with clear is "outside" its parent).
> If the child top margin would not be considered in the hypothetical
> position determination, clearance computation would be triggered, so
> even assuming that the result would be 0, one would say that the
> element with clear has clearance applied, then its margin would no
> more be allowed to 'escape' the bottom of the parent.

I agree with your analysis of this test case, that what browsers
currently show indicates that the top margin of the first in-flow child
is taken into account in the calculation of the hypothetical position.

I also agree that if it were intended to exclude the top margin of the
first in-flow child, there would be clearance of 0 and the parent's
content area would expand to 10px high.

However, in this particular test case, I think the latter behaviour is
desirable (in part due to the desire for continuity as seen when
reducing the height of the float from >10px down to <10px, but also for
consistency with the "easyclearing" technique whereby
div:after {
     content: "";
     display: block;
     clear: both;
}
causes the div to expand to enclose its floated children, even though
the generated content is empty) and hence I think that the current
wording of point 2 is appropriate insofar as the test case is concerned.

That browsers do not currently show this behaviour is probably a
consequence of them not currently implementing point 2 at all.

Cheers,
Anton Prowse
http://dev.moonhenge.net
Received on Sunday, 24 January 2010 16:38:50 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:23 GMT