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.

Update - 23 November 2008: The above specifications is being changed. Please see CSS WG discussion.

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:

outer element with light blue background with min-height:0

Example 2:

outer element with light blue background with min-height:25px

Example 3:

outer element with light blue background with min-height:26px

Example 4:

outer element with light blue background with min-height:50px

A pass or fail is for Example 3 and 4.

Passed: Opera 9 & Safari 3

Failed: FF 2~3.0.4 (passed by wording of original specification), IE7 (due to triggering haslayout) & IE8 beta 2

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

Opera and Safari allows the bottom margins of the inner box (last child) to collapse inside a min-height container in all examples.

  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

Last Updated: 23 November 2008.