Margin Collapsing

If you have any comments to make regarding this test, e-mail ian@hixie.ch.

Prerequisites

Browsers that are subjected to this test should support the CSS1 box model.

1. Simple

The two set of DIVs below should both render as an 8px yellow box contained within a black border of width 8px.

In the first case, the height of the middle DIV is from the top of the border edge of the inner DIV to the bottom border edge of the inner DIV, and that is zero. The margins of the inner DIV thus bleed to outside its parent, the middle DIV. Further, as they are adjacent, they collapse, leaving an 8px gap for the outer DIV. The background of the outer DIV is yellow.

In the second case, the inner DIV has 8px margins which collapse on themselves, and the middle DIV has a border, so the height of the middle DIV is from one of the inner DIV's margins to the other. In this case, the middle DIV's background is yellow.

This is from CSS2, section 10.6.3, as modified by the errata:

If it has block-level children, 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. However, if the element has a non-zero top padding and/or top border, then the content starts at the top margin edge of the topmost child. Similarly, if the element has a non-zero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.

The tests follow. They should be a 16px yellow bar in a 16px-border black box:

...and...

2. Less Simple

The following two tests (side by side) should render identically. The ideal output consists of a set of identically sized bars alternating in colour like this: black green purple yellow purple yellow purple green purple yellow purple yellow purple green purple yellow purple yellow purple green black.

3. Another Example

Following the rules given in test 1, the following test (left) should render like the one on the right. That is, green block with some lovely white text, boxed in a 8px black border, 16px fuchsia to the left and right, and 16px yellow above and below. The whole contraption should be boxed in another 16px black border.

4. Unequal Margins

It shouldn't matter if it is the bottom or top margin which is collapsing. Below there are two tests, one has a big bottom margin followed by a small top margin, the other has the opposite. They should be identical (thick black bar 24px tall, thick yellow bar 24px tall, thick black bar 24px tall).

Submit Results

Up to the Evil Tests Page.

Last updated in April 1999.