CSSにおけるマージンの相殺の規則

CSSにおいてマージンの相殺される際の基本的な規則は下記の通り：

• 水平方向（左右）のマージンは相殺されない（マージンの相殺が行われるのは垂直方向のみ）。
• パディング、ボーダーによって分離されず隣接するマージンにおいては、親ボックスとの間でも相殺が生じる。
• floatされたボックスマージンは相殺されない。
• overflow属性の値に"visible"以外が指定された要素は、その子要素とのあいだでマージンを相殺しない。
• 絶対配置（position:absolute;）されたボックスのマージンは相殺されない。
• inline-block要素（display:inline-block;と指定されたボックス）のマージンは相殺されない。
• クリアランスが与えられた要素の上のマージンは相殺されない。
• ルート要素のマージンは相殺されない。

相殺後に適用されるマージンの値は下記の方法で計算される。

• 隣接するマージンがすべて正の値の場合は、もっとも大きいマージンの値が適用される。
• 隣接するマージンが負と正の値の組み合わせの場合は、両方を合計した値が適用される。
• 隣接するマージンがすべて負の値の場合は、もっとも小さい（絶対値が最大のもの）マージンの値が適用される。

参考文献：

• Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則 p.69