marginの結合

2009-04-03 | CSS

あるボックスのmargin設定で、例えば以下のような垂直方向のmarginに結合（＝marginの相殺）が起こります。

div.boxA{margin:10px 0;}
div.boxB{margin:10px 0;}

<div class="boxA">●●●</div>
<div class="boxB">●●●</div>

boxAもboxBも上下10pxのマージンを設定していることから単純に計算するとboxAとboxBの間には20pxのマージンがあることになります。
しかし、ここでマージンの結合が発生！実際は10pxとなります。以下に発生条件と適用値を列記します。

条件：　隣接または入れ子の関係にある複数のボックスであること。
適用値：　一般的な配置（position:static;）の場合以下参照。

※float設定したボックス、絶対配置（position:absolute or fixed;）には適用されません。
※水平方向のマージンには適用されません。

まずはお気軽にご相談ください。