Re: Effect of border/padding and nested margins on outer block layout

Mark Shroyer wrote:

I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

_Collapsing Margins_
Most people think of margin collapsing happening when one block level
element follows another. However margins collapse whenever one margin
comes into contact with an adjacent margin. This means that margins can
also collapse when one element is contained within another.

To Prevent Adjacent Margins from Collapsing one can make them no longer
Adjacent by either; adding a border or adding some padding.

Read up on it in the CSS 2.1 Specifications.
Search the web for documents describing it.

--
Gus