WEB制作

【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に関連する記事も紹介しておきますね。

スポンサーリンク

-WEB制作
-, , , ,

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