Minimum height and collapsing margins

8.3.1 Collapsing margins: The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border.

Each test has an outer element with light blue background and vertical margins of 25 pixels and an inner element with green background and vertical margins of 50 pixels.

Example 1:

Example 2:

Example 3:

Example 4:

Browser performance Windows XP

Passed: FF 2.0.0.8

Failed: Mozilla 1.7.13, Opera 9.24, Safari 3.0.4 (beta) & IE 7 - Win-XP

Neither (min-height not supported): IE 5.5 & IE 6

Both Mozilla and Opera allow the bottom margins to collapse in all examples where this should only happen in example 1 and example 2 (borderline case). IE7 shows it's hasLayout bug which doesn't allow the any margin to collapse thus ignoring minimum height altogether. IE6 or earlier does not support minimum height.

<div class="wrapper">
<div class="space"></div>
<div class="outerbox minheight0">
<div class="innerbox">
<div>min-height:0</div>
</div>
</div>
</div>
<div class="space"></div>
</div>

.wrapper {background:url(../../../images/examples/bluehatchback3.gif) 0 5px;}
.outerbox {margin:25px 0;background: url(../../../images/examples/blue2tran.png)}
.innerbox {margin:50px 100px;background: url(../../../images/examples/green1tran2.png)}
.innerbox div {height:25px;}
.minheight0 {min-height:0px;}
.minheight25 {min-height:25px;}
.minheight26 {min-height:26px;}
.minheight50 {min-height:50px;}
.space {height:5px;background:#888}

1. height (not auto) and collapsing margins
2. min-height and collapsing margins
3. max-height and collapsing margins

A similar test case by Bruno Fassino - Collapsing bottom margins between a box with min-height and its last child