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の相殺条件について参考になり、少しでも良質なコンテンツを作る役に立てば幸いです。