CSS

marginの相殺を理解しよう

marginが垂直方向に重なったときに発生するmarginの相殺について見ていきます。

  • marginの相殺

marginの相殺

・今回はmarginの相殺について学んでいきます。marginの相殺とは垂直方向にmarginの指定が重なってしまった場合、小さい方が打ち消される仕様のことです。

・例えばboxAとboxBが上下で配置されていてboxAに対してmargin-bottomに30pxの余白を、boxBに対してmargin-topに対して20pxの余白を指定した場合boxBの20pxの余白は相殺されてなくなてしまいます。

・なので結果的にはboxAとboxBの間には30pxの余白しか指定されていない状態になります。

・どうしても余白を50pxにしたい場合はboxAに対してmargin-bottomに50pxの余白を指定するかboxBに対してmargin-topに50pxの余白を指定していきましょう。

・垂直方向で想定とは違う仕様になった場合このmarginの相殺を疑って見るといいでしょう。

-広告-

 

 






-CSS