marginの相殺

CSSにおけるmarginプロパティはボックスに対して余白部分を生成するというシンプルなものなのですが、『marginの相殺』という特徴があります。

marginの相殺について解説をしてみます。

垂直方向に隣接するボックスのmarginは相殺され、margin値が大きいブロックレベル要素のmargin値が採用されます。

marginの相殺

図では、上のボックスの下マージン(100px)が下のボックスの上マージンより大きい為、相殺されmargin値が大きい100pxのマージンが両ボックスの間に設けられます。

ただし、どちらかのmarginがネガティブマージンつまり、-の値をもつマージン値の場合は相殺されません。

片方がネガティブマージの場合

図では、上のボックスのマージンがマイナス、下のボックスのマージンがプラスと符号が異なる為、相殺されず-50px+80pxの30pxがそれぞれのボックスの間に設けられます。

どちらのmarginもネガティブマージンの場合は、相殺され絶対値の大きいほうがmargin値が採用されます。

両方ネガティブマージンの場合

図では、上のボックスも下のボックスもネガティブマージンが指定されている為、絶対値の大きいほう、つまり-80pxのマージン値が採用され2つのボックスのマージンは80px重なって表示されます。

ボックス内のボックスがある場合も相殺されマージン値の大きいボックスのマージンが採用されます。

ボックス内にボックスがある場合のマージンの相殺

ただし、外側のボックスにpadding又はborderが設定されているおらず、2つのボックスの間に匿名要素を含む、他の要素が存在しない場合にのみ発生します。

トラックバック内容: » CSSでよく陥るmarginの相殺 from Blog | sevenstyleweb
CSSコーディングをしていて、必ずといっていいほど使うmargin。このmarg...; トラックバック時刻: 2008年7月10日 11:35; » [CSS]簡単にCSSレイアウトできるフレームワークを考えてみる from Cyokodog::Diary
これからの時代はCSSレイアウトということで、Webアプリを作る際はなるべくfloatベースのCSSレイアウトを使うようにしてます。最近でこそそれなりに...; トラックバック時刻: 2008年8月 3日 10:44

コメント: 相手がtableだと相殺されないみたいですね。（IE6だと相殺されるけど）
display属性をblockにすると相殺されるみたいです。
http://cyokodog.blog4.fc2.com/blog-entry-10.html; 投稿者:cyokodog | 2008年8月 1日 10:16