Tests for collapsing margins: test 1

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:0; 
margin-bottom:0;
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...

Below is a test with ordinary blocks (in this test I have used four DIV elements and three of them are nested):

A test block: inside the outmost bordered (border:1px solid white) DIV element are three nested DIV elements, which have 50px top and bottom margins. Without collapsing margins the margin of this text would be 150px in proportion with the outmost DIV element.

Known correct rending:: new Netscape/ Mozilla browsers.

Known errors:

  1. Opera 4.x+ browsers don't collapse the bottom margins in the test, which use four DIV elements. It renders the bottom margin for the main content correct. Then collapsing bottom margins between HTML, BODY and the DIV element, which has the class doc, work.
  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 (presumably concerns all MS IE for Windows browsers).
  3. MS IE 4.0 for Windows collapse all vertical margins in the test, which use four DIV elements.
  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