RE: "non-zero top border" in 8.3.1

On Thu, 6 Sep 2007, Alex Mogilevsky wrote:
> 
> In this example -- example 1 in 
> http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/068.html
> 
>     <style>
>       .block        { height: 20px; background: silver; }
>       .nothing      { }
>       .topMargin    { margin-top: 40px; }
>     </style>
> 
>     <div class="block"></div>
>       <div class="nothing">
>         <div class="topMargin">
>         </div>
>       </div>
>     </div>

I'm assuming the first </div> is a typo and this should be:

     <div class="block">
       <div class="nothing">
         <div class="topMargin">
         </div>
       </div>
     </div>

> Q1: Should top border edge of "topMargin" be same as parent's (according 
> to 8.3.1-6.1)?

Yes, but it doesn't matter, as nothing is relative to that position (there 
are no floats or auto abs pos blocks).


> Q2: Should top margin of "topMargin" affect its parent's position?

For the purposes of float positioning and abs pos positioning, no.


> Q3: Should top margin of "topMargin" affect its own position?

For the purposes of float positioning and abs pos positioning, no. (This 
is one of the unintuitive results you get when you have self-collapsing 
blocks with margins and is a side-effect of the rules which were mostly 
designed for non-self-collapsing cases.)


> Q4: Should positions of "nothing" and "top margin" be same as if 
> "nothing" actually had content after any nested elements which margins 
> collapse with its top margin (as in attached 068a.htm)?

Assuming you mean:

     <div class="block">
       <div class="nothing">
         <div class="topMargin">
         </div>
         CONTENT <!-- here -->
       </div>
     </div>

...then everything is different. At this point, the 'nothing' DIV is no 
longer self-collapsing, and so these weird rules no longer apply to it. 
The topMargin's margin applies to the 'nothing' block, the top border edge 
of 'nothing' and 'topMargin' (and 'block') are both 40px from whatever 
came before.

However, this isn't noticeable unless you put floats or abs pos boxes 
there. Without those, these positions are irrelevant.


> (in your test 068, I am still having trouble explaining the expected 
> layout. If "nothing" is supposed to behave as if it had a top border, 
> why doesn't the picture match the case where it has a top border? Layout 
> in that case is 100% same in 4 browsers...)

I'm not sure I follow what you mean here. What picture doesn't match which 
case?

When you add an actual top border, the top margin of the child element is 
no longer collapsing with the top margin of its parent element, and so a 
whole different set of rules comes into play.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

Received on Thursday, 6 September 2007 19:23:34 UTC