隣り合う２つの要素間において、その要素それぞれにmarginを設定したけど合計の余白にならない、と困っている方はぜひ知っておきましょう。
ということで今回は marginの相殺 です。
marginの相殺とは
簡単に言いますと、
marginがぶつかり合ったとき、大きい数値の方のmarginが反映されるということです。
下記のコードを見てわかる通り、ピンクの要素に対してmargin-bottom:50px;、ブルーの要素に対してmargin-top:30px;を設定しましたが、
ピンクのmargin-bottom:50pxしか反映されていません。
See the Pen
margin-ofset by t.h (@tomtom15)
on CodePen.
50px と 30px で合計80pxの余白。
とはなりませんのでご注意ください。
ただし、marginの相殺は垂直方向にのみ発生します。
横並びの要素については、余白同士がぶつかったらちゃんと合計されます。
まとめ
縦並びの要素間はmarginの相殺が起こりますので注意しましょう。
詳しく知りたい方はこちらもどうぞ。
margin相殺と回避方法
marginに関連する記事も紹介しておきますね。
