マージンの相殺

概要

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

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

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

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

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

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

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

仕様書

関連情報