margin 相殺（マージンの重なり）を“直感で理解できるようにする”
margin 相殺は、CSS のボックスモデルの中でも初心者が最もつまずきやすいポイントです。
「なぜ margin が効かないの？」「上下の余白が思ったより大きい／小さい」などの原因は、ほぼ margin 相殺にあります。
ここでは、CSS と Tailwind CSS の両方で、仕組み・例題・実務的な回避方法まで丁寧に解説します。
margin 相殺とは何か
上下方向の margin が“合体して 1 つになる”現象
次のように、上下に並んだ要素があるとします。
.box1 {
margin-bottom: 40px;
}
.box2 {
margin-top: 20px;
}
通常なら 40px + 20px = 60px の余白になりそうですが、実際は 40px だけ になります。
理由
→ 上下方向の margin は「大きい方だけが残り、小さい方が消える」ため。
これが margin 相殺（margin collapsing）です。
margin 相殺が起きる具体例
例1：上下の兄弟要素で起きる
<div class="box1"></div>
<div class="box2"></div>
上下に並ぶ要素の margin-top と margin-bottom が重なり、
大きい方だけが適用されます。
例2：親と子の margin が重なる
<div class="parent">
<div class="child"></div>
</div>
.child {
margin-top: 40px;
}
この場合、親の上端が 40px 下がるように見えます。
理由
→ 親が border や padding を持たないと、子の margin が親に“突き抜けて”相殺されるため。
例3：空の要素でも margin が相殺される
<div class="empty"></div>
.empty {
margin-top: 40px;
margin-bottom: 40px;
}
上下の margin が相殺され、実際は 40px しか空きません。
Tailwind CSS でも margin 相殺は起きる
Tailwind はユーティリティクラスを使いますが、
margin の仕組みは CSS と同じです。
<div class="mb-10"></div>
<div class="mt-5"></div>
→ 実際の余白は mb-10（40px）だけ。
margin 相殺が起きる条件（深掘り）
margin 相殺は、次の条件で発生します。
- 上下方向（縦方向）の margin のみ
- ブロック要素同士
- 親と子の間でも発生
- 親に border / padding / overflow がない場合
- 空の要素でも発生
特に「親と子の margin が相殺される」ケースは、初心者が最も混乱するポイントです。
margin 相殺を防ぐ方法（CSS）
方法1：親に padding を付ける（最も一般的）
.parent {
padding-top: 1px;
}
1px でも padding があると margin 相殺は起きません。
方法2：親に border を付ける
.parent {
border-top: 1px solid transparent;
}
透明 border でも OK。
方法3：親に overflow を指定する
.parent {
overflow: hidden;
}
overflow が auto / hidden / scroll の場合、相殺されません。
方法4：子に padding を使う（margin を使わない）
.child {
padding-top: 40px;
}
padding は相殺されないため、安定します。
margin 相殺を防ぐ方法（Tailwind）
Tailwind でも同じ考え方で回避できます。
padding を付ける
<div class="pt-1">
<div class="mt-10"></div>
</div>
border を付ける
<div class="border-t border-transparent">
<div class="mt-10"></div>
</div>
overflow を付ける
<div class="overflow-hidden">
<div class="mt-10"></div>
</div>
margin 相殺の実践例
例題：カード内の最初の要素の margin が外に飛び出す
HTML
<div class="card">
<h3 class="title">タイトル</h3>
<p class="text">本文</p>
</div>
CSS
.card {
background: #fff;
padding: 20px;
}
.title {
margin-top: 20px;
}
→ padding があるので相殺されない
→ 正しく 20px の余白がつく
Tailwind版
<div class="bg-white p-5">
<h3 class="mt-5 text-xl font-bold">タイトル</h3>
<p class="text-gray-600">本文</p>
</div>
Tailwind では padding を付けることが多いため、
margin 相殺が自然と防がれます。
margin 相殺を理解するための図解イメージ
- margin は「外側の余白」
- 上下の margin は“押し合う”
- 大きい方だけが残る
- 親に padding / border がないと margin が突き抜ける
このイメージを持つと、挙動が直感的に理解できます。
まとめ
margin 相殺は、CSS レイアウトの安定性に大きく関わる仕組みです。
- 上下の margin は合体して大きい方だけ残る
- 親と子の margin も相殺される
- padding / border / overflow で防げる
- Tailwind でも同じ仕組みが働く
- padding を使うと安定したレイアウトになる
