Sent by Eric A. Meyer on 11 November 2003 17:05
At 18:56 -0500 11/10/03, Shaun Inman wrote:
>Thanks for the link MikeL, I'm familiar with collapsing margins, it just
>seems odd that in this case it isn't really collapsing the margin but
>instead extending it outside of the block level container.
That's part of margin collapsing. "Margin overlapping" might have
been a more accurate term, but too late now, I suppose.
>Border or no
>border I would expect a margin to stay inside the containing element. I'll
>dig through that read but I can't think of an occasion when I would want a
>margin to extend outside of the containing element.
Consider:
ul {margin: 1.5em 0;}
li {margin: 0.5em 0;}
div {margin-top: 1em;}
p {margin: 1em 0;}
<ul>
<li>Hi there!</li>
<li>How are you?</li>
</ul>
<div>
<p>I'm a happy paragraph.</p>
</div>
If margins didn't collapse, then the distance between the second list
item's bottom content edge and the paragraph's top content edge would
be 4em. Most authors would find this to be an annoying and ugly
result. Margin collapsing prevents it, and set the distance at a
more reasonable 1.5em.
If you add borders and padding to the situation, then expectations
are likely to have changed, which I presume is why CSS2.1 says that
adding padding or borders to an element prevents descendant elements
from having their margins from participating in collapsing (that is,
forces them "inside" the element with padding or borders).
--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://www.mako4css.com/)
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/