CSS WEB制作

marginの相殺を理解しよう marginが反映されない理由を解説

余白

cssでmarginを設定したけど反映されない・・・

と困っている人はいませんか?

 

それは「marginの相殺」によるもの、かもしれません。

頭の中が「相殺???」となっている人は、隣り合う2つの要素間において、その要素それぞれに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に関連する記事も紹介しておきますね。

-CSS, WEB制作
-, ,

© 2024 人生フリーハンド Powered by AFFINGER5