Re: Need information on clearance and margin-collapsing

On Sat, Jul 07, 2010 at 01:29 AM, Tab Atkins Jr. wrote:

> No, clearance is placed above the top margin of the clearing element,
> and so it's actually referring to the fact that the top margin of the
> clearing element no longer collapses with *preceding* margins, such as
> the margin-bottom of a previous sibling.

Ah, that makes sense completely.

> The Gecko/Presto is correct per spec in this case. It's pretty
> complex, though.

Indeed. However, the spec on this topic becomes clearer with each 
discussion/interpretation I hear from other people.

> First, we need to establish the hypothetical position, so we can
> figure out how much clearance we need.  So we temporarily ignore the
> clear and collapse the element's margins.  There's an important
> clarification here, though.  Per 9.5.2, we only collapse the top
> margin of the element with "previous adjacent margins".  In
> particular, we do *not* collapse it with its own bottom margin.  So
> there is 10px of margin total after the collapse occurs (because
> nothing collapses).
>
> So, 90px of clearance is generated to push the hypothetical position
> flush with the bottom of the float.
>
> Then the blue element is positioned.  The orange element's position
> has no effect on the blue element's position (per 8.3.1, last
> paragraph of bullet 6, the position is just for positioning its
> children), but the margins of the blue element still interact as
> normal.  So the two margins of the orange element collapse together
> and with the 0px margin of the blue, for a total of a 40px margin on
> the blue element.  90px of clearance + 40px of margin = 130px from the
> top, or 30px separation from the orange element.
>
> (I'm *pretty* certain that all of this is correct.  Not 100%, though.
> I'm working on making this clearer.)

I'm sure you're right. I've heard a few different 
opinions/interpretations on this topic and they all agree that the 
Gecko/Presto rendering is correct. Besides, Microsoft is reworking 
clearance and margin-collapsing in IE9 as well, moving closer to the 
apparently correct rendering with each preview.

Thanks for your support.

Kind regards, Daniel

Received on Tuesday, 10 August 2010 16:02:39 UTC