Re: Margin-color; text-indent; browser detection without script; attribute selector, ! combinator

On Wed, 10 Nov 1999 09:39:54 -0500 (EST), "Braden N. McDaniel"
(braden@endoframe.com) wrote:
> On Wed, 10 Nov 1999, L. David Baron wrote:
> > 
> > The answer is that the outermost margin color wins.  That is, the
> > elements involved in margin collapsing at a given point are always one
> > or two adjacent (in the flow) siblings and the (first/last) children of
> > those siblings.  The color of the margin is that of the parent of those
> > top-level siblings.
> > 
> > This is clear from the definition of 'height' given in the errata [1],
> > for section 10.6.3:
> > 
> > # If it has block-level children, the height is the distance between
> > # the top border-edge of the topmost block-level child box and the
> > # bottom border-edge of the bottommost block-level child box. However,
> > # if the element has a non-zero top padding and/or top border, then the
> > # content starts at the top margin edge of the topmost child.
> > # Similarly, if the element has a non-zero bottom padding and/or bottom
> > # border, then the content ends at the bottom margin edge of the
> > # bottommost child.
> 
> Going back to my example:
> 
>   <div style="background: blue">
>     <div style="margin: 2em">foo</div>
>   </div>
>   <div style="background: red">
>     <div style="margin: 2em">bar</div>
>   </div>
> 
> Could you explain further? I don't see how the definition of height
> clarifies this. The part that's unclear to me is the color of the margin
> between "foo" and "bar".

Call the divs A, B, C, and D, by order of their start tags.  The height
of div A is the distance from the top border edge of div B to the
bottom border edge of div B.  Since it has no padding or border, the
area filled by its background is its height.  (That is, the background
of div A and the background of div B (if it had one) cover the exact
same area.)  Similarly, the height of div C is the distance between the
border edges of div D.  Since the background is painted within the
border edge, and the margin is *not* within the border edge of any of
the DIVs, it is the color of the parent of A and C.

I think it should be made clearer in section 9.4.1 of the spec that if
the first child of a block-level element with no top padding or border
is a block box (rather than a line-box), then the top border edge of
that child is placed at the top of the containing block, since the
margin is collapsed outside the box.  However, if the block-level
element has top padding or border, then the top margin edge of the
child block is placed at the top edge of the containing block.  (This
is the only thing that fits with the rules on collapsing margins and
the rules for computing 'auto' heights, but it should be stated
explicitly.)

David

L. David Baron    Sophomore, Harvard (Physics)    dbaron@fas.harvard.edu
Links, SatPix, CSS, etc.     <URL: http://www.fas.harvard.edu/~dbaron/ >
WSP CSS AC                      <URL: http://www.webstandards.org/css/ >

Received on Wednesday, 10 November 1999 12:49:13 UTC