position:absolute; 
top:0; 
left:0; 
width:150px; 
height:100px; 

Tests for collapsing margins: test 2

This page tests, if vertical margins collapse correctly. Then main contens (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:0px; 
margin-bottom:0px;
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...

Because the black DIV element is absolute positioned, it should not affect anything to the positioning of this DIV element (absolute positioned elements have been entirely taken out of the normal flow of elements).

Known correct rending: Opera 4.x+.

Known errors:

  1. Tested Mozilla browsers don't render the margin-top property of this block correctly. The absolute positioned element, 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 (also some other tags cause the same result).
  2. MS IE 6.0 for Windows sets the bottom margin as 0. MS IE 6.0 for Windows ignores margin-bottom for the DIV element, which has the class doc.
  3. It looks like MS IE 4.0 for Windows renders top and bottom margins of page this correct because bottom and top margins are correct but because it have incorrect result in the next page it doesn't collapse values.
  4. Opera 7.0 Beta 1-2 ignores the bottom margin of the DIV element, which has the class doc.
Test 1 Test 2 Test 3 Test 4 Test 5