CSSのマージン相殺（margin collapsing）とは？上下の余白が消える理由を初心者向けに解説！

マージン相殺（margin collapsing）とは？上下の余白が消える理由

先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで段落と段落の間に余白を作ろうと思ってmarginを設定したのに、思ったより間が狭くなってしまいました。なんでですか？」

先生

「それは『マージン相殺（margin collapsing）』が起きている可能性が高いですね。」

生徒

「マージン相殺？初めて聞きました。どういうことなんですか？」

先生

「では、初心者にも分かりやすく、図や具体例を使って解説していきましょう。」

1. マージン相殺（margin collapsing）とは？

CSSのレイアウト作りで多くの初心者がつまずくポイントが「マージン相殺（margin collapsing）」です。

まず基本として、マージン（margin）とは要素の「外側の余白」を指します。通常、要素が縦に並ぶとき、上の要素の「下マージン」と下の要素の「上マージン」は足し算（合計）されると思われがちですが、実際には数値の大きい方のマージンだけが採用され、小さい方は吸収されて消えてしまいます。

これが「相殺（そうさい）＝打ち消し合う」と呼ばれる現象です。例えば、上が30px、下が20pxのマージンを持っていた場合、合計の50pxではなく、大きい方の30pxだけが実際の余白になります。

ポイント： マージン相殺は「垂直方向（上下）」のみで発生し、左右の余白では発生しません。

プログラミング未経験の方でもイメージしやすいよう、シンプルなコードで確認してみましょう。以下の例では、2つの色が付いたボックスにそれぞれ「20px」のマージンを設定しています。


<style>
    .box-top {
        margin-bottom: 20px; /* 下に20pxの余白 */
        background-color: #ffc107;
        padding: 10px;
    }
    .box-bottom {
        margin-top: 20px; /* 上に20pxの余白 */
        background-color: #0d6efd;
        color: white;
        padding: 10px;
    }
</style>

<div class="box-top">上のボックス（下マージン20px）</div>
<div class="box-bottom">下のボックス（上マージン20px）</div>

ブラウザ表示

本来なら「20px + 20px = 40px」の隙間ができるはずですが、ブラウザで確認すると20px分しか隙間が空いていないことがわかります。このように、マージンが重なってしまう性質を理解しておくことが、意図通りのデザインを作る第一歩となります。

2. 実際のマージン相殺の例を見てみよう

「マージン相殺」と言葉で聞くと難しく感じますが、実際の表示結果を見れば一目瞭然です。プログラミングやCSSに触れたことがない方でも直感的に理解できるよう、シンプルな2つのボックス（段落）を並べた例で解説します。

下の例では、2つの段落（pタグ）に対して、それぞれ上下左右に30pxのマージンを設定しました。普通に足し算で考えると、上の段落の下側（30px）と下の段落の上側（30px）が合わさって、合計「60px」の隙間ができそうですよね？しかし、実際のブラウザでは驚きの結果になります。


<style>
    .box {
        margin: 30px;
        padding: 15px;
        background-color: #e0f7fa;
        border: 2px solid #0097a7;
        text-align: center;
    }
</style>

<div class="box">上の段落（マージン30px）</div>
<div class="box">下の段落（マージン30px）</div>

ブラウザ表示

ブラウザで確認すると、段落同士の間の余白は「60px」ではなく、片方分の「30px」しか開いていないことがわかります。これがマージン相殺の正体です。

隣り合うマージンが「1＋1＝2」になるのではなく、重なり合って「大きい方の値（今回はどちらも同じなので30px）」が優先される仕組みになっています。Webデザインの現場で「なぜか余白が広くなりすぎないな？」と感じたら、この相殺が起きている可能性が高いですよ。

3. マージン相殺が起きる3つの代表的なパターン

CSSを触り始めたばかりの方が「意図した通りに余白がつかない」と悩む原因の多くは、このマージン相殺にあります。特に発生しやすい3つの具体例を見ていきましょう。

① 縦に並ぶブロック要素同士（隣接要素）

Webデザインで最も頻繁に遭遇するパターンです。上下に並んだ要素（pタグやdivタグなど）にマージンを設定すると、それぞれの余白が足されるのではなく、「大きい方のマージン」だけが採用されます。

例えば、上の要素に「下マージン30px」、下の要素に「上マージン20px」を指定しても、要素間の余白は50pxにはならず、大きい方の30pxだけが適用されます。これは、テキストの段落間で余白が広がりすぎるのを防ぐためのCSSの基本ルールです。

② 親要素と子要素のマージン（親子関係）

「親要素の中に余白を作りたいのに、なぜか親要素ごと下にズレてしまう」という現象です。親要素にボーダーやパディングがない場合、中にある子要素の上マージンが親要素を突き抜けて、外側にはみ出して合体してしまいます。


<style>
    .parent {
        background-color: #f1f8e9; /* 薄い緑の親ボックス */
        /* 親にborderやpaddingがないと相殺が起きます */
    }
    .child {
        margin-top: 50px;
        background-color: #8bc34a; /* 濃い緑の子要素 */
        color: white;
        padding: 10px;
    }
</style>

<div class="parent">
    <div class="child">子要素の上マージンが親を突き抜けます</div>
</div>

ブラウザ表示

このように、親要素の背景色（薄い緑）の上側に隙間ができず、親要素全体が50px下がって表示されます。初心者の方は「親要素に padding-top を使う」か「親に border をつける」ことで解決できると覚えておくと便利です。

③ 中身が空の要素（自己相殺）

コンテンツ（文字や画像）が全く入っていない「空のdivタグ」などでも相殺は起こります。その要素自身の「上マージン」と「下マージン」がぶつかり、1つにまとまってしまう現象です。

高さ（height）が指定されていない空の要素に上下マージンを設定しても、まるで1つ分のマージンしかないかのように振る舞います。これは、不要な空白が重なってデザインが崩れるのを防ぐための仕組みですが、レイアウト調整用の空要素を作るときには注意が必要です。

4. なぜCSSは「マージン相殺」という仕組みを採用しているの？

マージン相殺（Margin Collapse）というルールが存在するのは、Webページの読みやすさを保つために、「要素間の余白を自動的に最適化する」という意図があるからです。もしこの仕組みがなければ、上下に並ぶすべての要素の余白が単純に足し算され、デザインを整えるのが非常に困難になってしまいます。

例えば、ブログの記事を想像してみてください。見出しの下に30px、文章（段落）の上に20pxの余白を設定したとします。相殺が起きない場合、その間には50pxという広すぎる空間が生まれてしまいます。相殺が行われることで、設定した最大値である30pxが優先され、適度なリズムで読みやすいレイアウトが維持されるのです。これは、複数の開発者がパーツごとにCSSを書いても、組み合わせた時にデザインが崩れにくいというメリットもあります。

初心者向け：相殺がある時とない時の違い

「マージン相殺」が働いている状態を、プログラミング未経験の方でも分かりやすいコードで見てみましょう。上下のボックスにそれぞれ「20px」の余白を指定していますが、実際の間隔は40pxではなく、大きい方の20pxに統合されます。


<style>
    /* 箱の共通スタイル */
    .box {
        background-color: #e0f2fe;
        border: 2px solid #0ea5e9;
        padding: 10px;
        text-align: center;
    }
    /* 上下の箱にそれぞれ20pxのマージンを設定 */
    .margin-item {
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>

<div class="box margin-item">上のボックス (margin: 20px)</div>
<div class="box margin-item">下のボックス (margin: 20px)</div>

<p style="margin-top: 10px; font-size: 0.85rem; color: #666;">
    ※本来なら20+20で40px空くはずが、相殺によって20pxの隙間になります。
</p>

ブラウザ表示

このように、CSSは「個別の数値の合計」よりも「コンテンツ同士の最適な距離感」を優先するように設計されています。この仕組みのおかげで、私たちは細かな余白計算に悩まされることなく、統一感のある美しいWebサイトを作ることができるのです。

5. マージン相殺を防ぐ3つの解決策

「意図した通りに余白が空かない」「なぜか背景色が途切れて見える」といったトラブルは、マージン相殺を回避することで解決できます。CSS初心者の方でも今日から使える、実用的でシンプルな3つのテクニックを詳しく解説します。

① 親要素に「境界線」や「内側の余白」を作る

もっとも直感的な方法は、親要素に border（境界線）や padding（内側の余白）を設定することです。本来、マージン同士が直接触れ合うことで相殺が起きますが、これらを1ピクセルでも挟むことで「壁」ができ、相殺を物理的に防ぐことができます。


<style>
    .parent-box {
        background-color: #f3e5f5;
        border: 2px solid #9c27b0; /* 境界線がマージンの接触を防ぐ */
        /* または padding: 1px; でも解決します */
    }
    .child-text {
        margin-top: 50px;
        margin-bottom: 50px;
        background-color: #ffffff;
    }
</style>

<div class="parent-box">
    <p class="child-text">親要素にボーダーがあるため、マージンが突き抜けません。</p>
</div>

ブラウザ表示

② 親要素に overflow: hidden; を指定する

デザインの都合上、どうしてもボーダーやパディングを入れたくない場合に便利なのが overflow: hidden; です。本来は「はみ出た要素を隠す」ための設定ですが、これを適用すると親要素の内部に新しいルール（BFC：ブロック整形文脈）が作られ、子要素のマージンが親の外側へ漏れ出すのを防いでくれます。


<style>
    .overflow-box {
        background-color: #e3f2fd;
        overflow: hidden; /* これだけで中のマージンを閉じ込めます */
    }
    .content {
        margin-top: 40px;
        margin-bottom: 40px;
    }
</style>

<div class="overflow-box">
    <p class="content">overflow: hidden; によって、上下の余白が親要素の内側に保たれます。</p>
</div>

ブラウザ表示

③ 近代的な解決策 display: flow-root; を活用する

2026年現在のモダンなコーディングにおいて、最も推奨されるスマートな方法が display: flow-root; です。これは「マージン相殺を防ぐ」「float（浮き出し）を解除する」といった役割のために生まれたプロパティです。overflow: hidden; のように「中身が隠れてしまう」といった副作用がなく、安全にレイアウトを維持できるのが最大のメリットです。


<style>
    .modern-box {
        background-color: #e8f5e9;
        display: flow-root; /* 現代の標準的な相殺回避策 */
    }
    .modern-box p {
        margin: 30px 0;
    }
</style>

<div class="modern-box">
    <p>display: flow-root; を使うと、最もクリーンに余白を制御できます。</p>
</div>

ブラウザ表示

6. まとめ：マージン相殺を攻略して、思い通りのレイアウトを実現しよう

マージン相殺は、CSSを学び始めたばかりの方が最初にぶつかる「不思議な現象」のひとつです。上下に並んだ要素の余白が、足し算ではなく「大きい方の値に飲み込まれる」というルールは、一見不便に感じるかもしれません。しかし、この仕組みは文章の段落（pタグ）や見出しが連続した際に、余白が広がりすぎるのを防ぐための合理的な仕様でもあります。

ここがポイント！
マージン相殺を正しくコントロールするには、以下の3つを意識しましょう。

隣り合う要素の上下マージンは、大きい方が優先される
親要素と子要素の間でも、境界線（borderやpadding）がないと相殺が起きる
相殺を防ぎたいときは padding を使うか、border で仕切りを作る

それでは、プログラミングが初めての方でも分かりやすい簡単なサンプルで、マージン相殺の動きを確認してみましょう。赤と青のボックスにそれぞれ「30px」の余白を設定していますが、実際には「60px」にはならず、「30px」のままになる現象を再現しています。


<style>
    .box-container {
        background-color: #f8f9fa;
        padding: 10px;
    }
    .red-box {
        background-color: #ffcccc;
        margin-bottom: 30px; /* 下に30pxの余白 */
        padding: 20px;
        text-align: center;
    }
    .blue-box {
        background-color: #cce5ff;
        margin-top: 30px;    /* 上に30pxの余白 */
        padding: 20px;
        text-align: center;
    }
</style>

<div class="box-container">
    <div class="red-box">上のボックス (margin-bottom: 30px)</div>
    <div class="blue-box">下のボックス (margin-top: 30px)</div>
</div>

<p style="margin-top: 15px; font-size: 0.9em; color: #666;">
    ※本来なら30+30で60px空くはずですが、マージン相殺により30pxの隙間しか空きません。
</p>

ブラウザ表示

このように、CSSのボックスモデル（margin, padding, border）の基本をマスターすることで、デザインの崩れに悩まされることがなくなります。「なぜか余白が思い通りにいかないな？」と思ったときは、この記事で紹介した相殺のルールを思い出してみてください。意図した通りに余白を操れるようになれば、あなたのWebサイト制作はもっと楽しく、より美しいものになるはずです。

2026年最新スキルアップ・実践セミナー