Web制作実験「上下の要素間のmarginの相殺」の実験
以下、数値はmarginを表します。背景のグリッドは、灰色が25px、黒が50pxの正方形です。
borderがある場合
上要素の下margin と 下要素の上margin が違う場合
A下:100px、B上:50px
boxA
boxB
上要素の下margin と 下要素の上margin が同じ場合
A下:50px、B上:50px
boxA
boxB
borderがない場合
上要素の下margin と 下要素の上margin が違う場合
A下:100px、B上:50px
boxA
boxB
上要素の下margin と 下要素の上margin が同じ場合
A下:50px、B上:50px
boxA
boxB
floatの場合
共に、A下:50px、B上:25px
borderがある場合
boxA
boxB
borderがない場合
boxA
boxB