Empty divs and collapsing margins

block A with margin-bottom: 20px
block C with margin-top: 30px

Block A has margin-bottom:20px, block C has margin-top:30px, in the middle there is an empty div. In Moz, Saf, Op, IE the margins between A and C collapse (the distance between the two divs content is 30px.) The empty div in the middle doesn't prevent the collapsing, which is correct.

block A with margin-bottom: 20px
block C with margin-top: 30px

Now the middle empty div has height:0. In Moz, Saf, IE8, OP10.5 the margins still collapse. In Op10- and IE7-/Win the margins don't collapse (the distance between the two divs content is 50px.) With the height the empty div gets hasLayout in IE7-/Win, and this not surprisingly stops the collapsing, see IE7-/Win: Margin collapsing and hasLayout. Opera10- is wrong here, the specs esplicitly mention that height:0 should allow collapsing, from CSS2.1 8.3.1 :

An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) are adjoining.

block A with margin-bottom: 20px
a
block C with margin-top: 30px

The div in the middle is not empty, but still has height:0. No margins collapsing in Moz, Op, Saf, IE/Win.

block A with margin-bottom: 20px
block C with margin-top: 30px

This is like the first case, but in addition the empty div in the middle has same margins: top:10px, bottom:40px. All margins collapse together giving a 40px distance between A and C contents. OK in Moz, Saf, Op, IE.

block A with margin-bottom: 20px
block C with margin-top: 30px

This is similar to the previous case, but the empty div in the middle is not empty and has height:0. Its margins do no to collapse between them anymore, they only collapse with those of A and C. There should be 20px margin above the middle div, and 40px below. OK in Moz, Saf, Op, IE.

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

CSS tests home