Collapsing margins tests

Note: This file is served as application/xhtml+xml to browsers that support it — Opera7.5 and Gecko. This might affect results (although in my tests it didn’t, and shouldn’t).

test1

this floated block (floatA) has a margin of 25px on top and bottom
this floated block (floatB) has a margin of 25px on top and bottom
 
The distance between float A and floatB should be 50px — margins never collapse between floated blocks; this div has a margin of 25px set on top and bottom; it is not floated and is preceded by a clearing div with the following style: {height:0; font-size:1px; margin:0; clear:left;}; the clearing div contains a non breaking space ( ). The distance between this div and the (preceding) floated div floatB should be 50px a well.

test2

this floated block (floatA) has a margin of 25px on top and bottom
this floated block (floatB) has a margin of 25px on top and bottom
a
The distance between float A and floatB should be 50px — margins never collapse between floated blocks; this div has a margin of 25px set on top and bottom; it is not floated and is preceded by a clearing div with the following style: {height:0; font-size:1px; margin:0; clear:left;}; the clearing div contains a character (a). The distance between this div and the (preceding) floated div floatB should be 50px a well.

test3

this floated block (floatA) has a margin of 25px on top and bottom
this floated block (floatB) has a margin of 25px on top and bottom
The distance between float A and floatB should be 50px — margins never collapse between floated blocks; this div has a margin of 25px set on top and bottom; it is not floated and is preceded by a clearing div with the following style: {height:0; font-size:1px; margin:0; clear:left;}; the clearing div is empty. The distance between this div and the (preceding) floated div floatB should not be 50px. It is in Opera7.5, and I believe this is wrong.

test4

this floated block (floatA) has a margin of 25px on top and bottom
this floated block (floatB) has a margin of 25px on top and bottom. Much more text is added to this div. and more and more and more. And more.
The distance between float A and floatB should be 50px — margins never collapse between floated blocks; this div has a margin of 25px set on top and bottom; it is not floated. It is not preceded by a clearing div. The clearing is set on the div itself. The distance between this div and the floated div floatB is 25px; although here browsers differ: Opera7.5 (tested on OS X, confirmed for Windows XP) shows a distance of 50px — I believe this is wrong. The rules for “clear” take effect here.

[Update] — added a test file using only margin bottom to create space between the floated block and the no floated block. And a file to clarify the behaviour between a floated block and the following non–floated block.

Last modified: September 26 2009 05:36:34 GMT.