Sent by Jon Jensen on 26 May 2004 17:05
Michael,
Short answer:
1. Remove the margin from your <p>s
or
2. Give your <div>s padding and/or borders.
Long answer:
It's what's known as collapsing margins, and in this case Mozilla and Opera
have it right and IE is the one at fault. The low-down is this: adjoining
margins of elements with no borders or padding (as is the case here with
the <p>'s nested in <div>'s) should collapse. In English that means that if
the outer element (<div>) has no border or padding (which is the case), the
two elements will be flush and the greater of the two margins (the <p> in
this case) will be applied to the outer element. Weird? Maybe. But that's
what the spec says, and in many cases it's actually quite useful.
This article explains it better than I can:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
And here's the actal spec from the W3C:
http://www.w3.org/TR/REC-CSS2/box.html
Jon
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/