collapsing bottom margins between a box with min-height and its last child

From CSS2.1 - 8.3.1 :

The bottom margin of an in-flow block-level element with a 'height' of 'auto' is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border.

From CSS2.1 - 10.6.3 :

If 'height' is 'auto' … the height is the distance between the top border-edge of the topmost block-level child box … and the bottom border-edge of the bottommost block-level child box … if the bottom margin of the block does not collapse with the bottom margin of its last in-flow child, then the content ends at the bottom margin edge of the bottommost child.

From CSS2.1 - 10.7 :

The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above. If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'. If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

These steps do not affect the real computed values of the above properties. The change of used 'height' has no effect on margin collapsing except as specifically required by rules for 'min-height' or 'max-height' in "Collapsing margins" (8.3.1).

In the following test case a blue box:

  1. has margin-bottom: 10px
  2. has min-height: 30px
  3. has a (last) child, green with height: 20px and margin-bottom: 30px
  4. is followed by a grey box with no margin
  5. has 2px horizontal padding (not relevant, only for visualization purpose)

In absence of min-height, the height of the blue box should be 20px (the height of the child), and there should be 30px margin between the blue box and the grey one (collapsing between 10px and 30px). When min-height is applied the browsers' behavior differs (a previous version of the spec stated that margins collapsing should no more occur, but this has been changed). The height of the blue div is 30px in recent versions of Gecko, Safari, Opera; it is 50px in IE8 (includes the green child bottom margin). The margin between the blue box and the grey one is 30px (collapsed) in Safari and Opera; it is 10px in Gecko and IE8.

The following test case is like the first one, but min-height is now 19px. The height is 20px in Gecko, Safari, Opera; it is 50px in IE8. The margin is 30px (collapsed) in Gecko, Safari, Opera; it is 10px in IE8.

The following test case is like the first one, but min-height is now 60px. The height is 60px in Gecko, Safari, Opera, IE8. The margin is 10px in Gecko and IE8; 30px (collapsed) in Safari, Opera.


In the following test case the blue box has max-height: 15px (and no min-height). Its height is 15px in Gecko, Safari, Opera, IE8. The margin is 30px (collapsed) in Safari, Opera, IE8; 10px in Gecko.

In the following test case the blue box has max-height: 21px (and no min-height). Its height is 20px in Gecko, Safari, Opera, IE8. The margin is 30px (collapsed) in Gecko, Safari, Opera, IE8.

CSS tests home