CSSを弄っていたらマージンの相殺を経験した話

はじめに

先日、HTMLとCSSの学習をしていたら意図しない所で躓いてしまいました。"マージンの相殺(Margin Collapsing)"という現象でした。そこで今回はこの現象について解説したいと思います。

マージンの相殺とは？

マージンの相殺とは、垂直方向に隣接する2つのマージンが重なってしまう現象のことを言います。以下に例を示します。

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

上記のようなコードでは、.box1と.box2のマージンが相殺し、合計50pxではなく、大きい方のマージンの値30pxが適用されることになります。

マージンの相殺を解決する方法

1：Flexを利用する

Flexコンテナ内のアイテム間にはマージンの相殺が発生しないため、これを利用することで問題を解決することができます。

.container {
  display: flex;
  flex-direction: column;
}

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

上記のコードでは、display: flexとflex-direction: columnを追加することで、.box1と.box2はFlexコンテナのアイテムとなり、マージンの相殺は発生しません。その結果、.box1と.box2の間には合計で50pxのマージンが適用されます。

2：Overflowを利用する

もう一つの方法として、overflowプロパティを利用する方法があります。overflowをautoまたはhiddenに設定することで、マージンの相殺を防ぐことができます。

.container {
  overflow: auto;
}

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

上記のコードでは、overflow: autoを追加することで、.box1と.box2のマージンの相殺が解消され、合計で50pxのマージンが適用されます。

まとめ

この記事を書いていて、過去にも同じことがあったかもしれない・・・と実は感じていました。だた、言葉自体を知らなかったことと、どこが原因でうまくいかないのかがわからない状態でした。言葉自体がわかればあとは調べられるんですが、そこまでの道のりが長いですよねぇ〜。。。

この記事が皆さんのCSSトラブルシューティングの参考になれば幸いです。