CSS marginとpaddingの違い｜相殺と効かない原因一覧

margin は要素の「外側」の余白、padding は要素の「内側」の余白です。境界線（border）を挟んで、外にあるのが margin、内にあるのが padding で、背景色が塗られるのもクリックに反応するのも padding まで、という違いがあります。 もうひとつ大きな違いが、上下の margin 同士は重なって1つにまとまる「相殺」が起きるのに対し、padding では起きないことです。

この記事では、ボックスモデルの図と違いの比較表、1〜4値の書き方と論理プロパティ（margin-inline / margin-block）、相殺が起きる3パターン（兄弟・親子・空要素）、相殺しない条件、「効かない」ときの原因チェック表と解決策、gap との使い分けまでを扱います。寸法はすべて Chromium 141（Playwright 1.56 のヘッドレス実行）で getBoundingClientRect() と getComputedStyle() を使って実測しました。 「30px と 20px の margin が並ぶと間隔は何 px か」を、数値で確かめながら読めます。

marginとpaddingの早見表

迷ったら「背景色を付けたときに、色が付いてほしい部分は padding、付いてほしくない部分は margin」と考えると選びやすくなります。

ボックスモデルで見るmarginとpaddingの位置

CSS では、すべての要素が4層の箱（ボックスモデル）として扱われます。内側から順に、content（中身）、padding、border、margin です。

┌───────────────── margin（外側の余白・透明）──────────────────┐
│                                                              │
│   ┏━━━━━━━━━━━━━━ border（境界線）━━━━━━━━━━━━━━━┓   │
│   ┃                                                    ┃   │
│   ┃   ┌────────── padding（内側の余白）──────────┐   ┃   │
│   ┃   │                                          │   ┃   │
│   ┃   │      content（文字や画像が入る領域）     │   ┃   │
│   ┃   │                                          │   ┃   │
│   ┃   └──────────────────────────────────────────┘   ┃   │
│   ┃          ↑ ここまで背景色が塗られ、クリックに反応  ┃   │
│   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛   │
│                                                              │
└──────────────────────────────────────────────────────────────┘

背景色とクリック領域を実測する

width: 100px; height: 40px; padding: 20px; margin: 30px の青い div を置き、スクリーンショットの色と、クリックへの反応を調べました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  body { margin: 0; }
  #t {
    width: 100px; height: 40px;
    padding: 20px;
    margin: 30px;
    background: rgb(0, 128, 255);
  }
</style>
</head>
<body>
  <div id="t" onclick="console.log('クリックされました')"></div>
</body>
</html>

要素の箱は左上 (30, 30) から 140 × 80（content 100 × 40 + padding 上下左右 20）でした。padding は要素の一部で、margin は要素の外であることが、色とクリックの両方から確かめられます。ボタンやリンクの押しやすさを上げたいときは、margin ではなく padding を広げます。

負の値とautoは marginだけ

getComputedStyle() で、指定がどう解釈されたかを確かめました（幅 200px の div、表示領域の幅 800px）。

margin: auto の算出値から、通常の流れでは左右の auto だけが余りを分け合い、上下の auto は 0 になることも読み取れます。

marginとpaddingの書き方（1〜4値と論理プロパティ）

1〜4値の一括指定

margin と padding は、値の個数で適用される辺が決まります。書き方は両方とも同じです。

個別に指定するときは margin-top・margin-right・margin-bottom・margin-left（padding も同様）を使います。

論理プロパティ（margin-inline / margin-block）

top・left のような物理的な方向の代わりに、文章の流れに沿った方向で指定する書き方です。横書きの日本語・英語では、inline が左右、block が上下にあたります。

margin-inline-start: 30px と margin-block-start: 10px が、書字方向でどの辺になるかを測りました。

「左右だけ」「上下だけ」を1行で書けるのが、横書きだけのサイトでも便利な点です。 たとえば中央寄せは margin-inline: auto と書くと、上下の margin に触れずに済みます（幅 200px の箱が 400px の親の中で左から 100px の位置に来ることを実測で確認しました）。

ブラウザの既定の余白

何も指定しなくても、ブラウザの既定のスタイルで余白が付いている要素があります（Chromium 141、文字 16px のとき）。

「指定していないのに余白がある」ときは、開発者ツールの Computed（計算済み）タブで、どのスタイルが効いているかを確認できます。

marginの相殺が起きる3パターン（実測）

相殺（margin collapsing）とは、上下に隣り合うブロックの margin が足し算されず、1つにまとまる仕組みです。段落を続けて書いたときに間隔が倍にならないよう、CSS の仕様として用意されています。起きるのは上下方向だけで、左右では起きません。

以下の実測では、すべて高さ 50px の青い箱（.b）を使い、body の margin は 0 にしています。

body { margin: 0; }
.b   { height: 50px; background: #9cf; }

パターン1：兄弟要素の間

上の要素の margin-bottom と、下の要素の margin-top が相殺します。

<div class="b" style="margin-bottom: 30px"></div>
<div class="b" style="margin-top: 20px"></div>

パターン2：親と最初の子（最後の子）

親に padding も border もないとき、最初の子の margin-top は親の外に出て、親ごと下に押し下げます。 「子に margin-top を付けたら、親の上に余白ができた」という現象の正体です。

<div class="b"></div>                          <!-- 上の箱（0〜50px） -->
<div id="parent" style="background: #fc9">
  <div id="child" class="b" style="margin-top: 40px"></div>
</div>
<div class="b"></div>                          <!-- 後ろの箱 -->

最後の子の margin-bottom でも同じことが起きます。子に margin-bottom: 40px を付けた場合、親の高さは 50px のままで、40px の余白は親の外（後ろの箱との間）に出ていました。親に height: 80px を指定した場合は外に出なくなり、後ろの箱は親の直後（130px）に来ました。

パターン3：空の要素

高さも padding も border も中身もない要素は、自分の margin-top と margin-bottom 同士が相殺します。

<div class="b"></div>
<div style="margin-top: 20px; margin-bottom: 30px"></div>   <!-- 空の要素 -->
<div class="b"></div>

スペーサー用の空の div に上下の margin を付けて「思ったより間隔が狭い」ときは、この相殺が原因です。

相殺のルールまとめ

相殺しない条件一覧

相殺は「通常の流れの中で、上下に直接触れ合っているブロックの margin」だけで起きます。次の場合は起きません。兄弟の margin-bottom: 30px と margin-top: 20px で測った結果を添えます。

Flexbox や Grid でレイアウトを組んでいると相殺に出会いにくいのは、子同士も親子も相殺しないためです。 反対に、同じコンポーネントを通常のブロックの中に移すと間隔が変わることがあるので、間隔の取り方をあらかじめ決めておくと安定します（後述の「gap との使い分け」）。

marginやpaddingが効かない原因チェック表

「指定したのに余白が変わらない」ときは、次の表を上から順に確認してください。

主な項目を、実測の数値で確かめていきます。

インライン要素の上下margin・padding

幅 400px の親の中で、文字の間に置いた span を測りました（行の高さ 24px）。

インライン要素は、左右の margin / padding は効き、上下は「行の高さ」に反映されません。 display: inline-block にすると上下も効くようになります。display の値ごとの違いは、当サイトの「CSS displayの種類一覧」の記事で詳しく比べています。

margin: auto が効く条件

幅 400px（一部は高さ 300px）の親の中で、幅 200px・高さ 50px の箱の位置を測りました。

margin: auto は「余っている幅（高さ）を自動で割り当てる」指定なので、余りがあることが条件です。inline-block を中央に置くときは、親に text-align: center を指定します。中央寄せの全パターンは、当サイトの「CSS 中央寄せの方法」の記事にまとめています。

% は親の「幅」が基準

幅 400px・高さ 200px の親の中で測りました。

上下方向でも幅が基準になるのは仕様どおりの動きです。この性質は、以前は「縦横比を保つ箱」を作るために使われていました。現在は aspect-ratio プロパティで直接書けます。

box-sizing で幅の数え方が変わる

width: 200px; height: 100px; padding: 20px; border: 5px solid を指定した箱の、実際の大きさです。

幅 400px の親の中で width: 100% と組み合わせると、差がはっきり出ます。

多くのサイトでは、次の指定を最初に入れて、すべての要素を border-box に揃えています。

*, *::before, *::after { box-sizing: border-box; }

margin は box-sizing に関係なく、常に幅の外側です。 width: 100% の要素に左右の margin を付けるとはみ出すため、幅の指定を外すか、親の padding で余白を作ります。

高さが未指定だと % の高さは 0 になる

スクロールする箱（overflow: auto）の中の最後の子に margin-bottom: 50px を付けたケースも測りました。高さ 100px の親の中に高さ 100px の子を入れると、scrollHeight は 150 になり、Chromium 141 では下の margin もスクロール範囲に含まれていました。

解決策3つ（flow-root・gap・padding置換）

解決策1：親に display: flow-root（親子の相殺を止める）

/* 直す前：子の margin-top が親の外に出る */
.card { background: #fc9; }
.card > h2 { margin-top: 40px; }

/* 直した後：親が margin を内側に閉じ込める */
.card { background: #fc9; display: flow-root; }

実測では、親の上端が 90px から 50px に戻り、親の高さが 50px から 90px（子の margin 40px を含む）になりました。padding-top: 1px や border-top でも止まりますが、寸法が 1px 増えます。flow-root は寸法を変えません。 また flow-root は、float した子を親の高さに含める効果もあります（高さ 0 だった親が 50px になることを確認）。

解決策2：親で間隔を管理する（flex / grid + gap）

/* 直す前：子それぞれに margin。相殺や、端の余白の調整が必要 */
.list > .item { margin-bottom: 20px; }

/* 直した後：親が間隔を決める。相殺は起きない */
.list { display: flex; flex-direction: column; gap: 20px; }

gap: 20px の縦並びでは、2つ目の箱の上端が 70px（50 + 20）でした。gap は「要素と要素の間」だけに入り、最初と最後の外側には付きません。

解決策3：marginをpaddingに置き換える

/* 直す前：子の margin で親の内側に余白を作ろうとしている */
.box > :first-child { margin-top: 40px; }

/* 直した後：親の padding で内側の余白を作る */
.box { padding-top: 40px; }

「親の内側の余白」は、もともと padding の役割です。親の中の余白は親の padding、兄弟同士の間隔は gap か margin、と役割を分けると、相殺を意識する場面が減ります。

通常のブロックで間隔をそろえる書き方

flex にしない場合は、「2つ目以降の要素の上にだけ margin を付ける」書き方が便利です。

.stack > * + * { margin-top: 16px; }

高さ 50px の箱を3つ並べると、上端は 0・66・132px、親の高さは 182px（最後の下に余白なし）でした。margin の向きを上だけに統一しているので、兄弟の相殺も起きません。

コピペ用：余白の基本セットと確認の手順

ここまでの内容を、そのまま貼って使える形にまとめます。最初に入れておくと、「はみ出す」「親ごと下がる」「間隔が倍にならない」といった場面が減ります。

/* 1. 幅の数え方を border-box に揃える（padding を付けても幅が変わらない） */
*, *::before, *::after { box-sizing: border-box; }

/* 2. body の既定の margin（8px）をなくす */
body { margin: 0; }

/* 3. 内側の余白は親の padding で作る */
.card { padding: 24px; display: flow-root; }

/* 4. 等間隔に並べるときは親の gap */
.row   { display: flex; flex-wrap: wrap; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* 5. 箱を左右中央に置く（幅の指定とセット） */
.container { max-width: 960px; margin-inline: auto; padding-inline: 16px; }

/* 6. 押しやすいリンク（上下の余白を効かせるために inline-block） */
.button { display: inline-block; padding: 12px 20px; }

それでも意図と違う余白になったときは、ブラウザの開発者ツールで次の順に確認すると、原因を絞り込めます。

gapとmarginの使い分け

gap は、Flexbox・Grid（および段組み）の親に指定して、子と子の間隔を決めるプロパティです。幅 320px の折り返すフレックスコンテナに、幅 100px の箱を5つ入れて比べました。

/* A: gap */
.wrap { display: flex; flex-wrap: wrap; width: 320px; gap: 10px; }

/* B: margin */
.wrap { display: flex; flex-wrap: wrap; width: 320px; }
.wrap > .item { margin-right: 10px; margin-bottom: 10px; }

使い分けの目安は次のとおりです。

Flexbox と Grid のどちらで並べるかは、当サイトの「FlexboxとGridの使い分け」の記事で比較しています。

よくある質問

Q. margin と padding のどちらを使うか迷ったときの決め方は？ A. 3つの質問で決められます。(1) 背景色や枠線の内側に余白がほしい → padding。(2) クリックやタップに反応する範囲を広げたい → padding。(3) ほかの要素との間隔を空けたい → margin（親が flex / grid なら gap）。実測のとおり、padding は背景が塗られてクリックにも反応し、margin はどちらも対象外です。

Q. 相殺は左右の margin でも起きますか？ A. 起きません。相殺は上下（ブロック方向）の margin だけの仕組みです。margin-right: 30px と margin-left: 20px の inline-block を並べた実測では、間隔は足し算の 50px でした。また、flex や grid の子同士では上下でも相殺せず、30px と 20px の間隔は 50px になりました。

Q. 相殺を意図的に利用する場面はありますか？ A. 文章の段落がその例です。p には上下に 16px ずつの margin が既定で付いていますが、相殺のおかげで段落の間隔は 32px ではなく 16px になり、見出しやリストが混ざっても間隔が倍になりません。記事の本文のように「ブロックが縦に続く文章」では相殺が自然に働くので、そのまま活かすのが扱いやすい方法です。

Q. 負の margin はどんなときに使いますか？ A. 親の padding を打ち消して画像だけを端まで広げる（margin-inline: -16px）、要素を少し重ねる、といった用途です。margin: -10px は算出値でも -10px として有効でした。レイアウト全体を負の margin で組むと追いかけにくくなるので、部分的な調整にとどめると読みやすい CSS になります。

まとめ

• margin は border の外側、padding は内側。 背景色が塗られ、クリックに反応するのは padding まで（実測で padding は青・反応あり、margin は白・反応なし）。
• 負の値と auto を指定できるのは margin だけ。 padding: -10px や padding: auto は無効になる。
• 相殺は上下の margin だけで起き、兄弟・親子・空要素の3パターンがある。 30px と 20px が並ぶと間隔は 30px。
• flex / grid の子、flow-root の親、padding や border のある親では相殺しない。 同じ指定で間隔は 50px になった。
• 効かないときは「インライン要素の上下」「相殺」「auto の条件」「% は親の幅基準」「box-sizing」「高さ未指定」を順に確認する。
• 解決策は、親に display: flow-root、親で gap、内側の余白は padding に置き換える、の3つ。
• 等間隔に並べるなら gap、個別の間隔や寄せは margin、枠と中身の間は padding と役割を分ける。

株式会社RJCでは、marginとpaddingをはじめとするCSSレイアウトの基礎を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。