vertical margin collapsing

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I have a test page at:

The first 3 divs are not nested (shouldn't really have named these
grandparent etc) - they are just a control to see what the bottom margin
looks like on each div.

The page looks the same in IE6 and Mozilla 1.4, but the last set of divs are
much more spread out in Opera 7.1 - which is why someone in an earlier
thread was having problems with his footer div being below the bottom of the
view port.

As I understand it, vertical margins collapse, so I was expecting a single
bottom margin equal in size to the largest bootom margin set i.e. the 6em
set on the child green div. This would mean that the red and blue bottom
borders would coincide at 6em below the green div. This is not what is
happening. I would appreciate it if someone could point out were I am
interpreting vertical margin collapsing wrongly and why is Opera looking so
different to IE6 and Mozilla 1.4


Re: vertical margin collapsing

Quoted text here. Click to load it

It looks the same to me in IE6, K-Meleon 0.8 (based on Mozilla 1.5) and
Opera 7.22.

Quoted text here. Click to load it

The vertical margins of *adjacent* blocks collapse, but not those of
*nested* blocks.  As Eric Meyer points out in his O'Reilly book, it's
probably better to think of adjacent vertical margins as being
"overlapped"; the second block is "slid up" by the amount of the smaller
margin.  That plainly won't work when one block is inside another.

Site Timeline