marginの相殺について理解を深めよう【CSSを書いていこう】

    目次

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

    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の相殺を疑って見るといいでしょう。

    以上





    この記事が気に入ったら
    いいね または フォローしてね!

    よかったらシェアしてね!
    • URLをコピーしました!
    目次