概要
ブロックの 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 つ以上のマージンによるもの）が起きます。
このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、（上のルールに従って）その親要素より外側に出ます。
負のマージンが絡む場合には、相殺されたマージンの大きさは、一番大きな正のマージンと一番小さな（もっともマイナスの）マージンの合計値になります。
浮動する要素 と 絶対位置指定された要素 では、マージンの相殺は起きません。
仕様書
関連情報
- CSS リファレンス
- CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素