marginの相殺

このエントリーをはてなブックマークに追加

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

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

垂直方向のmargin相殺

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

marginの相殺

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

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

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

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

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

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

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

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

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

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

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

サンプル

関連エントリー

CSSのレイアウトテクニック - Faux Absolute Positioning
CSS で簡単にメニューの上下中央揃えを実現する
javascriptなしで背景が透けるカラムを実装するスタイルシート
CSSでロールオーバーもどき
operaでのfloatの挙動

スポンサードリンク

«Feed登録者数が2000名を超えました。 | メイン | Googleキーワード ツールが月間検索数を表示»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1036
トラックバック内容
» CSSでよく陥るmarginの相殺 from Blog | sevenstyleweb
CSSコーディングをしていて、必ずといっていいほど使うmargin。このmarg...
» [CSS]簡単にCSSレイアウトできるフレームワークを考えてみる from Cyokodog::Diary
これからの時代はCSSレイアウトということで、Webアプリを作る際はなるべくfloatベースのCSSレイアウトを使うようにしてます。最近でこそそれなりに...
コメント

marginの相殺はよく陥っていました。
なんとなく、相殺されるって具合だけで、具体的に絵として認識していなかったので、すごく勉強になりました。ありがとうございます。

PS
しかし、垂直の相殺もありますが、IEとかで起こる、左右のmarginの倍になる現象もやっかいですよね~。

投稿者:seven | 2008年7月10日 11:38

相手がtableだと相殺されないみたいですね。(IE6だと相殺されるけど)
display属性をblockにすると相殺されるみたいです。
http://cyokodog.blog4.fc2.com/blog-entry-10.html

投稿者:cyokodog | 2008年8月 1日 10:16

>sevenさん

返事が遅くなりすみません。

>IEとかで起こる、左右のmarginの倍になる現象もやっかいですよね~。

ですよね~。
対応方法のエントリーアップしておきました。

http://blog.webcreativepark.net/2008/08/25-135914.html

投稿者:西畑一馬 | 2008年8月25日 14:58
コメントを投稿