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. 実際のマージン相殺の例を見てみよう

下の例では、2つの段落（pタグ）にそれぞれマージンを設定しています。どちらもmargin: 30px;にしているので、普通に考えると間の余白は60pxになりそうですが…実際には30pxしか開きません。


<style>
p {
    margin: 30px;
    background-color: #e0f7fa;
    border: 1px solid #0097a7;
}
</style>

<p>上の段落です。</p>
<p>下の段落です。</p>

ブラウザ表示

これは、上の段落の下マージン30pxと、下の段落の上マージン30pxが「重なり合って1つの30px」になっているからです。これがまさにマージン相殺の仕組みです。

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

① 縦に並ぶブロック要素同士

最もよくあるパターンです。たとえば段落（pタグ）や見出し（h1〜h6）、divタグなど、縦方向に積み重なった要素の上下マージンが重なります。

② 親要素と子要素のマージン

実は、子要素の上マージンが親要素にくっついて相殺されることもあります。例えば、親のdivに背景色をつけていても、子のpタグの上マージンが外側に飛び出してしまうことがあります。


<style>
.box {
    background-color: #f1f8e9;
    border: 2px solid #8bc34a;
}
p {
    margin-top: 40px;
    background-color: #dcedc8;
}
</style>

<div class="box">
    <p>子要素の段落です。</p>
</div>

ブラウザ表示

このように、親と子の間でもマージンが合体してしまい、思った位置に余白がつかないことがあります。

③ 空の要素

中身が何も入っていない空の要素でも、上下のマージンが相殺されます。つまり、内部にコンテンツがないと「上」と「下」のマージンが1つにまとまってしまうのです。

4. なぜCSSはマージン相殺を採用しているの？

マージン相殺のルールは、見た目を自然に整えるためにCSSの仕様として決められています。もし相殺されず、上下のマージンがすべて足し算されたら、ちょっとした調整のたびに余白がどんどん広がってしまいます。

たとえばブログの記事本文の段落間などで、1つ1つの要素がそれぞれマージンを持っていたら、余白が倍になってしまいます。相殺のおかげで見た目がスッキリ揃うのです。

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>

ブラウザ表示