marginの結合

あるボックスの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;)の場合以下参照。

  1. [正の値]|[正の値] ─── 最大値
  2. [正の値]|[負の値] ─── 最大値と最小値の和
  3. [負の値]|[負の値] ─── 最小値

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