From:  "Stanimir Stamenkov" <>
Date:  22 Sep 2005 18:34:20 Hong Kong Time

Re: More on the root element and the initial containing block - vertical margin collapsing


[x-posting to c.i.w.a.stylesheets, followup-to c.i.w.a.stylesheets]

/Stanimir Stamenkov/:

> Now, the example DIV element has top and bottom margins of 3em and
> 'height: 30%'. What I observe in Mozilla (actually SeaMonkey 1.0 Alpha)
> and Opera 8.02 is the appearance of a vertical scroll-bar for the
> viewport adding about 3em of height to scroll. IE 6 doesn't show a
> scroll-bar.

I think I've got it. I've made another sample:

So, the DIV element is collapsing margin with the BODY element (as seen
by differntly colored backgrounds) were the extra height comes from.
Turns out Internet Explorer to be incorrect(?) in this case, acting
somewhat between the initial CSS 2 recommendation and the latest CSS
2.1 revision. Opera still gives that strange bottom margin when the
root (HTML) element doesn't have a border:

A somewhat consistent behavior is achieved setting 'overflow: auto' on
both HTML and BODY elements:

In this case I'm not really sure how the "margin collapsing" is
supposed to work (between the element with 'overflow: auto' and the
child element which margin overflows) and Opera is far different than
Moz or IE, again: