マージンの相殺

概要

ブロックの topbottom のマージンは結合される(折り畳まれる (collapsed))ことがあり、結合されるマージンのうち大きなほうのサイズを持った一つのマージンになります。この動作は マージンの相殺 (margin collapsing) として知られています。

マージンの相殺が起きる、3つの基本的ケースがあります:

隣接兄弟要素
隣接兄弟要素のマージンは相殺されます(後ろの兄弟要素がそこまでのフロートを 解除 (clear) する必要がある場合を除く)。例をあげます:
 <p>この段落の bottom マージンは...</p>
 <p>...この段落の top マージンによって相殺されます。<p>
親要素と先頭・末尾の子要素
ブロックが、その margin-top とその先頭の子要素の margin-top を分けられるような、ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合、もしくは、ブロックがその margin-bottom とその末尾の子要素の margin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)高さの最小値 (min-height) のいずれも持たない場合、マージンは相殺されます。相殺されたマージンは最終的に、親要素の外側に出ます。
空のブロック
ブロックが、その margin-topmargin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)高さの最小値 (min-height) のどれをも持たない場合、top と bottom のマージンは相殺されます。

これらのケースが組み合わさると、もっと複雑なマージンの相殺(これは 2 つ以上のマージンによるもの)が起きます。

このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、(上のルールに従って)その親要素より外側に出ます。

負のマージンが絡む場合には、相殺されたマージンの大きさは、一番大きな正のマージンと一番小さな(もっともマイナスの)マージンの合計値になります。

浮動する要素絶対位置指定された要素 では、マージンの相殺は起きません。

仕様書

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,