【図解あり】CSSのmargin相殺とは？仕組みと防ぐ方法を初心者にもわかりやすく解説

「marginを指定したのに余白が思った通りにならない…」
そんな経験はありませんか？
実はその原因、多くの場合はmarginの相殺（margin collapse）です。
この仕組みを理解していないと、意図しないレイアウト崩れが起きることも。
この記事では、margin相殺の仕組み・発生する条件・防ぐための具体的な方法を初心者にもわかりやすく解説します。

marginの相殺とは

HTMLとCSSにおけるmarginの相殺は、CSSレイアウトにおいて発生する特定の現象で、隣接する要素や親子関係にある要素間のmarginが重なり、一部が無視されるような挙動を指します。
この仕組みを理解することは、予期しないデザインの崩れを防ぐ上で重要です。

marginの相殺の発生条件

・隣接するブロック要素のmargin

2つのブロック要素が上下に隣接している場合、それぞれのmargin-topとmargin-bottomが重なることで間隔が大き　　　い方のmarginのみが適用されます。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

実際の間隔は20pxになります。
（20pxと10pxの大きい方のみが適用される）

・親子要素間のmargin相殺

親要素とその中の子要素の間で、親にpaddingやborderがない場合、子要素のmargin-topが親要素のmarginに相殺されます。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

ｐのmargin-topが親要素のmarginと相殺され、実際の余白は30pxのみになります。

・空のブロック要素

コンテンツを持たない空のブロック要素において、上下のmarginが重なり、1つのmarginとして扱われます。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

実際のmarginは30pxとなります。（大きい方が適用）

marginの相殺を防ぐ方法

・paddingやborderを追加する

　親要素にpaddingやborderを指定すると相殺が防がれます。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

この場合、親要素と子要素のmarginは相殺されません。

・overflowを設定する

親要素にoverflow: hidden;や
overflow: auto; を指定することで相殺を防げます。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

・flexboxやgridを使用

flexbox(display: flex; ) やCSSグリッド(display: grid; )を使用すると、marginは相殺されません。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

flexboxのgapを使うことでmarginの相殺を回避できます。

・displayの変更

display: inline-block; や display: table; を指定することで、marginの相殺が発生しないようにできます。

Summary

marginの相殺はCSSの仕様として意図的に設計されており、適切に対処することで予期しないレイアウト崩れを防ぐことができます。特にpaddingやborder、overflowの仕様が一般的な解決策です。

関連記事

その他関連記事はこちら→Programming Notes