divに背景色とmargin: 40px、divの中にあるh2にmargin: 40px、divの中にあるpにmargin: 1emを指定している。以下の3パターンで、縦方向のマージンで怪しい挙動を示すもの、示さないものを調べる。なお、padding、borderは指定していない。
divに横幅を指定しない場合、Mozilla Firefox、Opera、IE6、IE7は同じ挙動である。divの上marginとh2の上marginは相殺される。h2の上部にdivの背景色は反映されない。たとえh2の上marginが十分大きくても、h2の上部にdivの背景色は反映されない。同様に、divの下marginとpの下marginも相殺され、pの下部にdivの背景色は反映されない。
divに横幅を指定する場合、Mozilla Firefox、Operaと、IE6、IE7では挙動が異なる。
Mozilla Firefox、Operaでは（1）のケース同様、divの上marginとh2の上marginは相殺される。divの上marginはさらに、（1）のdivの下marginとも相殺される。h2の上部にdivの背景色は反映されない。divの下marginと、最後のpの下marginも相殺され、pの下部にdivの背景色は反映されない。
IE6、IE7では、divの上marginと（1）のdivの下marginは相殺されるが、divの上marginとh2の上marginは相殺されない。相殺されないため、h2の上部40ピクセルにdivの背景色が反映される。divの下marginと、最後のpの下marginも相殺されず、pの下部1emにdivの背景色が反映される。
divに横幅とfloatを指定する場合、Mozilla Firefox、Opera、IE7は同じ挙動である。divの上marginと（2）のdivの下marginは相殺されない。divの上marginとh2の上marginは相殺されない。h2の上部40ピクセルにdivの背景色が反映される。divの下marginと、最後のpの下marginは相殺されず、pの下部1emにdivの背景色が反映される。
ちなみに、IE6は上のマージンについては他と同様だが、左のマージンは指定した値の倍になる。ADP: フロートとマージンを参照のこと。