Column -コラム記事-

デザイナー

marginの相殺条件について

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

そもそもmarginの相殺って?

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

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

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

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

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

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

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

3.兄弟要素の上下margin

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

4.空の要素

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

例外はあるの?

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

まとめ

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

前ページに戻る