Tests for collapsing margins: test 5

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 top margin for HTML, BODY and DIV elements should not collapse in this case because between BODY and DIV elements is an invisible anchor (A) element. It creates some separative content (an anonymous box) between the BODY element and the main content. That's why the main content should have as if 200px top margin in proportion with the root element (HTML).

The margin-bottom property 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 margin-bottom property should go according to the biggest value, in this case 100px.

Known correct rending: Opera 4.x+.

Known errors:

  1. Tested Netscape/ Mozilla browsers have incorrect top margin for the main content. Presumably the achor tag (<a name="a" id="a"></a>), which is in the source code between the start-tag of the BODY element and the DIV, which has the class doc, gets Mozilla confused.
  2. Even if MS IE 6.0 for Windows sets the bottom margin as 100px it doesn't actually collapse 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 (presumably concerns all MS IE for Windows browsers).
  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