marginの相殺条件について

こんにちは、メディアメイドWebデザイナー担当です。
弊社ではデザイナーがプログラム以外のコーディング作業もしております。
先日「知ってはいるけどなんとなく」で曖昧になっていた部分の「marginにおける相殺条件」を調べるタイミングがあったので、ご紹介しようと思います。

そもそもmarginの相殺って？

例えばdiv要素が二つ並んでいるとします。
１つ目のdivにmargin-bottomを２０px設定しました。
２つ目のdivにmargin-topを３０px設定しました。
この場合上下のmarginが足されて、二つの間には50pxのmarginが存在すると思われるかもしれません。
しかし、実際は大きい方の値のみが設定され二つのdivの間には３０pxのmarginが存在することになります。
この大きい方の値のみが優先され、小さい方のmarginが足されなく状態を「marginの相殺」と呼びます。

どんな時でも上下のmarginは相殺されるの？

答えは「No」です。
相殺される条件は以下の通りとなります。

1.親要素と最初の子要素のmargin-top

例えば、入れ子になっている２つのdiv要素があるとします。
親にmargin-top：３０px
子にmargin-top：３０px
この場合marginは足されることなく、３０pxの値が適用された状態になります。

2.親要素と最初の子要素のmargin-bottom

これは上の1.と同じ内容です。
例えば、入れ子になっている２つのdiv要素があるとします。
親にmargin-bottom：３０px
子にmargin-bottom：３０px
この場合marginは足されることなく、３０pxの値が適用された状態になります。

3.兄弟要素の上下margin

これは最初の例題通りですので割愛します。

4.空の要素

例えば3つのdivタグが兄弟要素として書かれているとします。
2番目のdivタグはから要素で高さを持っていないとして、その要素に
margin-top：３０px
margin-bottom：３０px
を設定したとします。
この場合も他と同じくmarginは足されることなく30pxしか設定されません。

例外はあるの？

答えは「yes」です
・Flexbox、Grid、その他block要素でないタグ
・root要素
・borderやpaddingを使ったラインのボックス
これらに関してはmarginが相殺されることなく設定されます。

まとめ

いかがでしたでしょうか？
意外とややこしいmarginの相殺条件について参考になり、少しでも良質なコンテンツを作る役に立てば幸いです。