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' 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.

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'.

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 margins collapsing. When min-height is applied the collapsing should no more occur (according to the above 8.3.1.) Only Gecko (at least 1.8+) seems to apply this. Opera 9, Safari 3 all have a 30px margin between the blue and the grey box. The height of the blue div should be 30px, and here Gecko, Safari, Opera agree.

The following test case is like the first one, but min-height is now 19px. The height should be 20px and there should be collapsing. Gecko, Safari, Opera agree.

The following test case is like the first one, but min-height is now 60px. The height should be 60px (here Gecko, Safari, Opera agree) and there should be no collapsing (again only Gecko applies this, the other two still show a collapsed margin).


In the following test case the blue box has max-height: 15px (and no min-height). Its height should be 15px (Gecko, Safari, Opera agree) and there should not be collapsing (only Gecko applies this).

In the following test case the blue box has max-height: 21px (and no min-height). Its height should be 20px and there should be collapsing (Gecko, Safari, Opera agree).

CSS tests home