【CSS】margin-bottom＋margin-top＝？？？marginの相殺を知ろう！

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

CSSの学習中、「ソースコードに書いた通りに余白が取れない！ちゃんと指定しているのになぜ？」という問題に陥ったことことはありませんか？

そしてその原因が分からず、つまずいてしまったことはありませんか？

CSSには厄介な仕様「marginの相殺」というものがあります。
今回はこの「marginの相殺」について解説していきます。

marginの相殺の厄介な点は「この仕様自体を知らなかった」という方が多いところです。そのためCSS初心者の方はこの記事を読んでしっかり理解していきましょう。

marginの相殺は、連続する要素が上下に表示される場合、数値が大きい方のmarginが優先される仕様のことです。

まだしっくりこないと思うので図で説明していきます。

以下のように、上下にmarginを持つ要素があるとします。

この要素を上下に並べると、以下のようになると思いますよね？

でも、そうではありません。
連続する要素が上下に表示される場合、つまり、このように垂直に要素を並べた場合、数値が大きい方のmarginが優先されてしまいます。

よって、以下画像のように、marginは30pxとして表示されます。

marginの相殺を使うことで、記述を簡潔にできることがあるようです。ただ、ページの運用やリニューアルでデザイン変更の時にmarginの相殺を使っている場所があると、あとから改修するときに面倒ということで、嫌っているエンジニアが多いです。

要素を上下に並べる時は、上か下か一方向だけにmarginを指定してあげて、marginの相殺を回避しましょう。