Re: [CSS2.1] Clarifying 8.3.1 Collapsing Margins

On 22/09/2010 21:34, Anton Prowse wrote:
> <div style="margin:10px 0; height:0">
>     <div style="margin:10px 0"></div>
> </div>
>
> the parent's margins don't collapse according to the earlier rules
> concerning adjacency since the bottom margin of the child is not
> adjacent to the bottom margin of the parent. (Specifically, in this
> situation, the child self-collapses and the resulting margin collapses
> with the parent's top margin, but this new resulting margin doesn't
> collapse with the parent's bottom margin.)

> [...] But thank goodness for that 2007 spec change of
> 8.3.1.6.2! If the parent's top border position were calculated by
> introducing a temporary non-zero top border instead of a temporary
> non-zero bottom border, as used to be the case, then we'd be in a rather
> strange place with the following test case:
>
> <div style="border-bottom:1px solid"></div>
> <div style="margin-bottom:20px">
>     <div style="margin:100px 0"></div>
> </div>
> <div style="border-bottom:1px solid"></div>
>
> There'd be 120px between the two solid lines, the bottom 20px
> unmistakable as the bottom (uncollapsed) margin of the parent, yet the
> position of the parent's top border would be at the top of the 120px
> space. The moral is, "artificially" preventing collapsing sets traps for
> the unwary!]

There should, of course, have been a height:0 in that last test case, as in:

<div style="border-bottom:1px solid"></div>
<div style="margin-bottom:20px; height:0">
     <div style="margin:100px 0"></div>
</div>
<div style="border-bottom:1px solid"></div>

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Sunday, 26 September 2010 09:50:43 UTC