On 2006-11-01, Gérard Talbot <ne***********@gtalbot.orgwrote:
[snip]
>><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title></title>
<style type="text/css">
body {background-color: white; color: black;}
#parent_block {background-color: red; width: 100%;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
</style>
</head>
<body>
<div id="parent_block"><p id="nested_child_block">foo</p></div>
2 questions regarding the above code.
1- Why Firefox 2 and Opera 9 do not render large red area above and
below the green child block? ... like MSIE 7 does
[snip]
>See "8.3.1 Collapsing margins" in the w3.org css2 specs
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
"In this specification, the expression collapsing margins means that
adjoining margins (no non-empty content, padding or border areas or
clearance separate them) of two or more boxes (which may be next to one
another or nested) combine to form a single margin."
A better explanation:
http://www.complexspiral.com/publica...psing-margins/
Rich
Rich, I still do not understand why Firefox 2 and Opera 9 render the
margin area as white and not red. In the following testcase:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<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.
I'm not Rich, but I'll have a go at explaining.
There _is_ collapsing of margin involved (or should be-- MSIE 7 is wrong
on this one). The nested_child_block has top and bottom margins of 150px
and the parent block has top and bottom margins of 0px.
A box's margins can collapse with those of its children. If a box has a
top margin, and the first block box nested inside that box also has a
top margin, and the outer box has no border or padding, those two top
margins count as "adjacent" and collapse together.
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
and serves as the top margin area for both boxes.
An easier way perhaps to understand this is to think about what a margin
is. A margin is a requirement for space between the edge of a box and
some kind of boundary. A box's margin _starts_ outside its border, which
is outside its padding, which is outside its content area. If the box
has no border, then the margin effectively starts at the outside of the
padding; and if it has no padding, then the margin effectively starts at
the outside of the content area. But a margin can only _end_ at an
actual padding edge or border edge of some other box or at the edge of
the viewport itself.
The nested_child_block must have 150px of fresh air above it. That is
what the styles ask for. But what is at the other end of that 150px? It
has to be a padding edge, border edge or the edge of the viewport. The
top of parent_block is not a good enough boundary because parent_block
has no padding or border. That is why you don't (or shouldn't) get
parent_block growing in height to leave space inside itself for the
nested_child_block's top margin.
Give parent_block top padding of 1px or a top border and you will see
the margin appearing below it, inside parent_block, and therefore with a
red background.
What happens if you give parent_block a top margin (but no padding or
border) of 10px in IE? Do you get another 10px above it? If so, you've
got 160px altogether of margin between the top of nested_child_block and
the viewport edge (the nearest margin-end boundary). That's too big, the
styles only ask for 150px, which is why we can say IE is wrong. That's
why margins collapse, to ensure that the gaps between where margins
start and where they are allowed to end (padding, border or viewport
edges only) are never bigger than the maximums required by what the
styles have asked for.
