目次
marginが垂直方向に重なったときに発生するmarginの相殺について見ていきます。
![](https://teatree-web.com/wp-content/uploads/2023/05/ce9195f7ca1124a29544134bd2ff04c2.jpg)
![](https://teatree-web.com/wp-content/uploads/2023/05/e5627a12b53ca785b5bc0eab6458c089.jpg)
marginの相殺
前回まででマージンの外側の余白について見てきました。
詳しくは『marginで外側の余白をつけよう【CSSを書いていこう】』を御覧ください。
今回は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の相殺を疑って見るといいでしょう。
以上