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.
Passed: FF 2.0.0.8
Failed: Mozilla 1.7.13, Opera 9.24 & IE 7
Neither (max-height not supported): IE 6
Both Mozilla and Opera allow the bottom margins to collapse in all examples where this should only happen in example 3 (borderline case) and example 4. IE7 shows it's hasLayout bug which doesn't allow the top margin to collapse thus forcing the inner element with a green background down by the width of the top margin.
<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;}
.maxheight0 {max-height:0px;}
.maxheight24 {max-height:24px;}
.maxheight25 {max-height:25px;}
.maxheight50 {max-height:50px;}
.space {height:5px;background:#888}