なぜ「マージンが消える」のか？CSSマージンの相殺という“仕様”と向き合う
フロントエンド開発の現場で、一度は必ず壁にぶつかる現象があります。それが「マージンの相殺（Margin Collapsing）」です。
「pタグとh2タグを並べたのに、CSSで指定したはずの間隔が半分しかない」「親要素のmargin-topが、なぜか突き抜けて外側の要素に影響している」。こんな経験はありませんか？
これはバグでもブラウザの気まぐれでもありません。CSS仕様書に堂々と記された、由緒ある挙動です。しかし、現代のコンポーネント指向な開発において、この「おせっかいな挙動」はしばしばレイアウト崩れの元凶となります。
今回は、このマージンの相殺を正しく理解し、現場で頭を悩ませないための「制御術」を叩き込みます。
—
1. マージンの相殺とは何か：ブラウザの裏側の論理
マージンの相殺とは、隣接するブロックレベル要素の垂直方向のマージンが重なり合い、大きい方の値が採用される現象のことです。
なぜブラウザはこんなことをするのでしょうか？
その理由は「文書としての体裁」を整えるためです。もし段落（pタグ）の上下に常に同じマージンが加算され続けると、文書全体の間隔が不必要に広がりすぎてしまいます。Webの黎明期、ブラウザは「隣り合う要素同士の間隔は、一番大きい余白ひとつ分あれば十分だよね」という判断を下したのです。
相殺が起きる主なケース
1. 隣接する兄弟要素: 上下で隣り合っているとき。
2. 親要素と最初/最後の子要素: 子要素にmarginがあっても、親要素の境界線から突き抜けてしまうケース。
3. 空のブロック要素: marginとpaddingがゼロの要素。
これらは、Webが「ドキュメント（文書）」として定義されていた頃の名残ですが、現代の「アプリケーションUI」を構築する私たちにとっては、計算のズレを生む厄介な性質に他なりません。
—
2. 現場で使える「相殺を封じる」ためのテクニック
マージンの相殺を止めるには、ブロックの「境界」を明確にする必要があります。最近の現場で最もスマートな手法を3つ紹介します。
方法A：display: flow-root（最強の解）
最もクリーンな解決策は `display: flow-root` です。これを使うと、要素自体が新しい「ブロックフォーマットコンテキスト（BFC）」を形成し、その内側のマージンが外側に漏れるのを完全に防ぎます。
/ 親要素に適用するだけで、子要素のマージン突き抜けを防止 /
.container {
display: flow-root;
}
方法B：paddingで間隔を作る
そもそも「margin」を使わず「padding」で間隔を制御する手法です。これは堅実ですが、要素に背景色やボーダーがある場合にデザインが崩れるため、状況を選びます。
方法C：gapプロパティの活用（現代のスタンダード）
FlexboxやGridレイアウトを使える環境なら、marginで間隔を作るのは卒業しましょう。`gap`プロパティを使えば、そもそも相殺という概念自体が存在しません。
—
3. 実践：保守性の高いレイアウトコード
現場でそのまま使える、モダンなCSSの書き方です。`p`や`h1-h6`が混在する記事エリアを想定しています。
/ 記事本文のスタイル設定例 /
.article-content {
/ 親要素にBFCを形成させ、マージンの突き抜けを阻止 /
display: flow-root;
}
.article-content > + {
/
「隣接セレクタ」を活用したモダンなマージン管理。
直前に要素がある場合のみ、上部にマージンを適用する。
これにより、最初の要素のmargin-topが無駄に付くのを防ぐ。
/
margin-top: 1.5rem;
}
.article-content h2 {
/ 見出しの場合は間隔を広めに取るのが鉄則 /
margin-top: 2.5rem;
}
/
【ポイント】
あえてマージンを一括管理せず、コンテキストごとに
論理プロパティ（margin-block-startなど）を使うと、
将来的な縦書き対応も視野に入ります。
/
—
結論：マージンを「制御下」に置く
マージンの相殺に振り回されるのは、まだCSSを「なんとなく」書いている証拠かもしれません。「どこで相殺が起きるか」を予測し、「BFC」や「隣接セレクタ」、「gapプロパティ」といった道具を使い分けることで、レイアウトは驚くほど意図通りに動くようになります。
特に、チーム開発では「 margin-top を使う人」と「 margin-bottom を使う人」が混ざると、相殺の罠にハマりやすくなります。プロジェクトごとに「間隔は margin-top で統一する」といったルールを設けるだけで、コードの品質は格段に向上します。
技術は裏切りません。挙動を理解し、手懐けていきましょう。それでは、また現場でお会いしましょう。
コメント