実行できるCSSドキュメント: margin と padding

Q: padding と margin のどちらで要素のサイズは大きくなりますか？

初期値の box-sizing: content-box では padding で大きくなります。padding は幅と高さに加わるからです。margin は要素のサイズには加わらず、周りに空間を足すだけです (width: auto のブロックはむしろ狭くなります。margin が使える幅の一部を取るからです)。box-sizing: border-box では、padding は幅の内側から取られます。

違いを 1 つの図で

padding は border の内側、margin は外側です。 下の 2 つのボックスは内容も値 (24px) も同じで、違うのはプロパティだけです。灰色は後ろにあるコンテナです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

padding では 24px が青になります。ボックスの一部で、border の内側にあり、ボックスが大きくなります。margin では 24px が灰色になります。ボックスは文字の周りにぴったりのままで、外側の余白がコンテナの端を押し広げます。

1 つのボックスで両方を試す

2 つのスライダーを動かしてみてください。padding は青いボックスを大きくし、margin はボックスを変えずに灰色の端から離します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

サイズの行を見てください。padding のスライダーを動かすと変わり、margin のスライダーを動かしても変わりません。

margin と padding の比較表

	padding	margin
場所	border の内側	border の外側
背景	要素の背景が見える	常に透明
クリック範囲に含まれるか	含まれる	含まれない
要素のサイズに加わるか	加わる (`content-box` の場合)	加わらない
`auto` にできるか	できない	できる (`margin: 0 auto` で中央寄せ)
マイナスにできるか	できない	できる
縦の値の相殺	起きない	起きる (隣接する縦の margin は相殺される)
パーセントの基準	包含ブロックの幅	包含ブロックの幅
主な用途	ボタン、カード、入力欄の内側の余白	要素間の余白、中央寄せ

それぞれのプロパティの詳細は専用のページにあります: CSS padding と CSS margin。

どちらを使うか

1 つだけ自問します: その余白は要素に属するのか、要素と要素の間にあるのか。

ボタンのラベルの周り、カードの内側、入力欄の文字と border の間の余白: padding。背景が見え、押せる範囲が広がります。
2 つの段落の間、カードの間、セクションの周りの余白: margin。親が flex や grid のコンテナなら gap。

選択がいちばん効くのはクリック範囲です。下の 2 つのリンクはページ上で同じ広さを占めますが、1 つ目の余白は padding、2 つ目は margin です。押しやすいのは 1 つ目だけです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

オレンジ色の破線のアウトラインが要素の端で、クリックやタップに反応する範囲です。2 つ目のリンクの周りの margin は、何も反応しない空白です。

項目間の余白: margin か gap か

項目が並ぶ行やグリッドでは、各子要素に margin を付けるより、flex や grid の親に gap を指定するほうがたいていすっきりします。gap は項目の間だけに入り、最初の項目の前や最後の項目の後には入らないので、打ち消す必要がありません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

ここでは灰色のコンテナが padding (内側の余白、灰色)、各項目が padding (それぞれの内側の余白、緑) を使い、項目の間の余白は gap が担っています。

よくある間違い

色を付けたい余白に margin を使う。 margin は透明です。背景を見せたい余白は padding です。
リンクを大きくするのに margin を使う。 クリック範囲は border で終わります。padding を使いましょう。
20px の縦の margin 2 つで 40px になると思う。 隣接する縦の margin は 20px に相殺されます。padding は相殺されません。
中央寄せに padding: auto を試す。 auto が使えるのは margin だけです。
padding でボックスが大きくなることを忘れる。 box-sizing: border-box を追加すれば、width に padding が含まれます。

よくある質問

margin と padding の違いは何ですか？

padding は要素の内側、内容と border の間の余白です。margin は border の外側、要素と隣の要素の間の余白です。padding には要素の背景が見え、margin は常に透明です。

margin ではなく padding を使うのはどんなときですか？

要素に属する余白には padding を使います。ボタンの文字の周り、カードの内側など、背景を共有したい余白やクリックできるようにしたい余白です。別々の要素の間の余白には margin (flex や grid なら gap) を使います。

padding と margin のどちらで要素のサイズは大きくなりますか？

初期値の box-sizing: content-box では padding で大きくなります。padding は幅と高さに加わるからです。margin は要素のサイズには加わらず、周りに空間を足すだけです (width: auto のブロックはむしろ狭くなります。margin が使える幅の一部を取るからです)。box-sizing: border-box では、padding は幅の内側から取られます。

padding も margin のようにマイナスにできますか？

できません。マイナスの padding は無効で無視されますが、マイナスの margin は使えて、要素を重ねることもできます。padding は auto にもできないので、中央寄せには margin: 0 auto を使います。