vertical margin collapsing

[David Graham]

Hi
I have a test page at:
http://p0c79.phpwebhosting.com/~p0c79/test130.html

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

thanks
David

 

[Eric Bohlman]

I have a test page at:
http://p0c79.phpwebhosting.com/~p0c79/test130.html

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.

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

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

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.