きっちり計算してレイアウトを作ったのに、大きさが合わない・・・。
margin が思ったように反映されない？どうして？
margin の相殺を理解していないと、そんなことになったりしますよね。
どんな場合に margin の相殺が起きるのか、起きないのかのまとめです。
どんな時に margin の相殺が起こるのか
細かな条件や例外を除いて、ざっくり言ってしまえばこれです。
「縦方向に接するブロックレベルの要素間の margin は相殺される」
隣接する margin は大きい方が適用されます。
要素同士が親子関係である場合、横方向の margin も接しますが、縦方向は相殺が起こり、横方向は起こりません。
margin の相殺例外： 兄弟関係の要素
兄弟関係の要素に以下のモジュールやプロパティが指定されている場合、相殺は起こりません。
- フレックスボックス・レイアウト
- グリッド・レイアウト
- position プロパティ（fixed、absolute が指定されている）
- float プロパティ（left、right が指定されている）
margin の相殺例外： 親子関係の要素
親子関係の要素に以下のモジュールやプロパティが指定されている場合、相殺は起こりません。
- フレックスボックス・レイアウト
- グリッド・レイアウト
- position プロパティ（fixed、absolute が指定されている）
- 親要素に border が指定されている
（border-top 指定 → margin-top は相殺なし）
（border-bottom 指定 → margin-bottom は相殺なし） - 親要素に padding が指定されている
（padding-top 指定 → padding-top は相殺なし）
（padding-bottom 指定 → padding-bottom は相殺なし） - 親要素の heigh に数値が指定されている場合、margin-bottom は親要素のものが採用される
（heigh: auto の場合、相殺が起こる）
margin の相殺の特殊ケース： 空要素
空要素（コンテンツの高さがゼロ）の場合のみ、margin の相殺は特殊です。
- まず、空要素の中の margin-top と margin-bottom の間で相殺が起こります。大きい方が採用されます。
- 次に、空要素と隣接する要素との間に相殺が起こります。上の要素の margin-bottom、下の要素の margin-top、空要素の margin で一番大きいものが採用されます。