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. マージン相殺を防ぐ方法

「余白が消えて困る！」という場合は、いくつかの回避方法があります。これらを知っておくと、思い通りのデザインを作りやすくなります。

① 親要素にパディングやボーダーをつける

親要素にpadding（内側の余白）やborder（境界線）をつけると、マージン相殺は発生しません。マージンの間に“壁”ができるイメージです。


<style>
.box {
    background-color: #f3e5f5;
    border: 1px solid #9c27b0;
    padding: 1px; /* わずかでもOK */
}
p {
    margin-top: 40px;
}
</style>

<div class="box">
    <p>マージン相殺を防いだ例です。</p>
</div>

ブラウザ表示

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

CSSのプロパティで「overflow: hidden;」をつけても、マージン相殺を防ぐことができます。スクロールなどの設定に使われることもありますが、ここでは“相殺防止”にも使える便利な方法です。


<style>
.box {
    background-color: #e3f2fd;
    overflow: hidden;
}
p {
    margin-top: 40px;
}
</style>

<div class="box">
    <p>overflowで相殺を防止しています。</p>
</div>

ブラウザ表示