Collapsing margins tests

note:this file served as text/html to everyone except Gecko browsers and Opera7.5 (application/xhtml+xml). In the tests below, the pink coloured blocks are identical, except for different margins on top and bottom. the little heading preceding each test have a bottom margin of zero.

test1

This floated block (floatB) has a margin of 25px on top and 25px on bottom.
This is a static block, with class “nonFloat”, with 25px margin on top and bottom. Some more text wrapping a right floating image. Continuing our story for today, the cat started hunting! He's attempting to catch butterflies and cicadas. Sitting on the ground, he is calling them... mekmekmek... with passionante eyes, then jumps. Most of the time, they are faster than him. Damn poet.

test2

This floated block (floatB) has a margin of 25px on top and 25px on bottom.
This is a static block,with class “nonFloat2”, with 100px margin on top and bottom. Some more text wrapping a right floating image. Continuing our story for today, the cat started hunting! He's attempting to catch butterflies and cicadas. Sitting on the ground, he is calling them... mekmekmek... with passionante eyes, then jumps. Most of the time, they are faster than him. Damn poet.

test3

This floated block (floatB) has a margin of 25px on top and 25px on bottom.
This is a static block, with class “nonFloat3”, with 25px margin on top and bottom. It has also clear:left applied. Some more text wrapping a right floating image. Continuing our story for today, the cat started hunting! He's attempting to catch butterflies and cicadas. Sitting on the ground, he is calling them... mekmekmek... with passionante eyes, then jumps. Most of the time, they are faster than him. Damn poet.

test4

This floated block (floatB) has a margin of 25px on top and 25px on bottom.
This is a static block, with class “nonFloat3”, with 100px margin on top and bottom. It has also clear:left applied. Some more text wrapping a right floating image. Continuing our story for today, the cat started hunting! He's attempting to catch butterflies and cicadas. Sitting on the ground, he is calling them... mekmekmek... with passionante eyes, then jumps. Most of the time, they are faster than him. Damn poet.

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