Tests for collapsing margins: test 3

This page tests, if vertical margins collapse correctly. Then main content (for example this text) is inside the DIV element, which has the class doc.

html {margin:0
padding:0; 
border-width:0}

body {margin-top:100px;
margin-bottom:100px;
padding:0; 
border-width:0}

div.doc {margin-top:100px; 
margin-bottom:100px}

The margin-top and margin-bottom properties of this DIV should be 100px. Because there are no separative borders or paddings between HTML, BODY and DIV elements, top and bottom margins for HTML, BODY and DIV elements should collapse, but (if all values are positive) the value of the previous mentioned properties should go according to the biggest values, in this case 100px.

8.3.1 Collapsing margins

In this specification, the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

... Vertical margins may collapse between certain boxes:

Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths...

Known correct rending: Opera 4.x+ and new Netscape/ Mozilla browsers.

Known errors:

  1. MS IE 6.0 for Windows (presumably older version too) don't collapse vertical top margins between the HTML and the DIV element, which has the main content.
  2. Even if MS IE 6.0 for Windows sets the bottom margin as 100px it doesn't actually collapse bottom margins. MS IE 6.0 for Windows just ignores margin-bottom for the DIV element, which has the class doc, because it behaves at that way in the Test 1 and Test 2.
  3. MS IE 4.0 for Windows doesnt' collapse top and bottom margins but reads both of them.
  4. Opera 7.0 Beta 1-2 ignores the bottom margin of the DIV element, which has the class doc. Even if the result look out correct the browser doesn't behave correctly.
Test 1 Test 2 Test 3 Test 4 Test 5