[CSS21] top margin edge - hence static position - is not well-defined

10.6.4 concerning the height of absolutely positioned elements says:

   # [...] the static position for 'top' is the distance from the top
   # edge of the containing block to the top margin edge of [...]

But the vertical margin edges are not well-defined for elements whose 
margins participate in margin collapsing.  This is most noticeable for 
self-collapsing elements, such as in the following test case in which 
there is no sensible relationship between the border box position of the 
"tricky" element (as determined by 8.3.1) and its 20px bottom margin:

<div style="border-bottom:1px solid"></div>
<div id="tricky" style="margin-bottom:20px">
     <div style="margin-top:10px"></div>
</div>
<div style="border-top:1px solid"></div>

For the most part this glitch doesn't cause us any problem since the 
spec avoids (albeit probably unconsciously) identifying individual 
margin pieces from amongst a collapsed margin lump.  However, 10.6.4 
relies on identifying the top margin edge of a box which may very well 
participate in margin collapsing.

What should we do to fix this?  Where should the absolutely positioned 
element be drawn in the following test case, and why?

<div style="border-bottom:1px solid; margin-bottom:20px"></div>
<div style="position:absolute; width:100px; height:100px; background: 
yellow; margin-top:10px"></div>
<div style="border-top:1px solid; margin-top:20px"></div>

There's no interop on this issue, but that's because Fx and IE don't 
perform tentative margin collapsing at all for abspos in order to 
determine their static position.  (Indeed, UAs are free to make a guess 
at static position.)  The spec isn't free to leave a concept ill-defined 
though!  Op and Sf do perform tentative margin collapsing and they seem 
to use the formulation I give below to identify the top margin edge.

My feeling is that we should explicitly define the top margin edge 
position.  Happily, there's a natural way of doing this, since the 
general problem illustrated in the test case only affects bottom margin, 
never top margin.  Specifically, when a box's top margin collapses with 
another margin thus contributing to a final margin lump, the distance 
between the box's top border position and the top of the margin lump is 
always at least as great as the box's top margin width.  Hence it's 
possible and meaningful to define the top margin edge to be the distance 
above the top border edge given by the used value of 'margin-top'.


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

Received on Sunday, 27 March 2011 13:31:41 UTC