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

生徒

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

先生

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

生徒

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

先生

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

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

まず、マージン（margin）とは、ボックスとボックスの「外側の余白」のことです。HTMLの要素同士が縦に並ぶとき、上の要素の下マージン（margin-bottom）と、下の要素の上マージン（margin-top）がくっつくように作用します。

このとき、2つのマージンは単純に「足される（合計）」のではなく、「大きい方だけが反映される」というルールがあります。これが「マージン相殺（margin collapsing）」です。

つまり、上下の余白が重なって1つのマージンにまとめられるイメージです。CSS初心者の方が「余白が思ったより狭い！」と感じる原因の多くは、このマージン相殺にあります。

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>

ブラウザ表示