Margin collapse

Vertical adjacent margins will collapse between adjacent blocks and even with their children.

IE will not collapse margins if the elements concerned have "haslayout". This is the same behaviour we get from other browsers if overflow with a value other than visible is used.

A better method to stop margin collapse is to put something solid in the way such as a padding or borders.

Test 1 - elements don't have "layout"

The vertical margins collapse but the horizontal margins don't. This displays the same in IE and Firefox because the elements dont have "haslayout"

Test 2 - "haslayout" given to IE6 & IE7

The vertical margins collapse but the horizontal margins don't. IE doesn't collapse the margins because each div has been given " a layout" (haslayout)

Test 3 overflow:auto added for Firefox etc.

The vertical margins don't collapse because overflow has been added. IE6 and under still need "haslayout" otherwise they will collapse the margins

Test 4 padding 1px added to the elements to stop margin collapse

The vertical margins don't collapse because something solid is the way such as a border or as in this case a 1px padding. (This example doesn't need "haslayout")