WEB制作

【CSS】注意! marginが効かなくて困っている人は知っておくべき  marginの相殺

スポンサーリンク

余白

2つの要素に対してmarginを設定したけど、思ったどおりの余白が実装できない、
と困っている方は是非知っておきましょう。

marginの相殺 です。

marginの相殺とは

簡単に言いますと、
marginがぶつかり合ったとき、大きい数値の方のmarginが反映されるということです。

 

単純に考えると・・・

要素A
-----------------------
要素Aのmargin-bottom:100px;
***********************
要素Bのmargin-top:50px;
-----------------------
要素B

要素A
-------
余白 150px
-------
要素B
-------

になると思いますよね。

 

実際には

要素A
-------
余白 100px
-------
要素B
-------

となります。

2つのブロック要素の間にあるマージン(100pxと50px)は、大きい方のマージンである100pxのマージンが反映されます。

 

回避方法

paddingやborderをうまく使って、余白を実装させましょう。

独自の言い回しで説明させて頂きました。大変恐縮です。

詳しく知りたい方はこちらもどうぞ。
margin相殺と回避方法



スポンサーリンク

-WEB制作
-, , , ,

© 2023 WEBセンス Powered by AFFINGER5