Re: Background and non-auto-width questions

On 2006-11-01, Gérard Talbot <newsblahgroup (AT) gtalbot (DOT) org> wrote:

Ben C a écrit :
[snip]
title>Why the margin area is not red?</title

style type="text/css"
body {background-color: white; color: black; margin: 0px;}
#parent_block {background-color: red; width: 100%; margin: 0px;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
/style

div id="parent_block"><p id="nested_child_block">foo</p></div

there is no collapsing of margin involved. MSIE 7 (final release)
renders the margin area as red, not white. Firefox 2.0 and Opera 9.1
render the margin area as white, not red. I wish to understand why.
[snip]
So far, I understand what you say and what the spec says.

And that's just what the situation is here-- the parent_block's top
margin of 0px is adacent with its child's top margin of 150px. The two
collapse to a resultant margin of 150px which goes above parent_block


"which goes above parent_block": where do you see/read this in CSS 2.1?

The spec tells us that the computed top margin on the parent_block is
the result of collapsing 150 and 0, which is 150. Therefore parent_block
has a top margin of 150.

It's true noone asked explicitly for 150px above the top edge of
parent_block, and leaving parent_block with a computed top margin of 0px
still gives nested_child_block its requested top margin of 150px and no
larger. So this is a corner case, where we are following the letter
rather than the spirit of the spec.

As discussed elsewhere on the other hand if parent_block's top margin is
non-zero then it is essential that its computed margin is the result of
collapsing with its child's top margin, or we have too much space above
the child.

Where do you read that the resultant margin takes its background color
from closest containing box (body in my example) within the containing
hierarchy?

The margin of a box is outside the area that's painted with its
background colour. So parent_block's top margin area must not be red in
this example, any more than nested_child_block's margin area should be
green.

This is section 8.1 of the CSS 2.1 spec, and there's a useful diagram.

You probably knew all that anyway; the less obvious thing here I think
is that parent_block itself has a computed top margin of 150px.