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

Q: padding のショートハンドの値はどの順番ですか？

上から時計回りです: padding: top right bottom left;。値が 3 つなら上、左右、下。2 つなら上下、左右。1 つなら 4 辺すべてです。

Q: padding を付けると要素は大きくなりますか？

初期値の box-sizing: content-box では大きくなります。padding が width と height に加わるからです。box-sizing: border-box では padding が幅の内側から取られるので、要素は指定したサイズのままです。

Q: パーセントの padding は何を基準にしますか？

4 辺すべて、包含ブロックの幅が基準です。padding-top: 50% は親の高さではなく幅の半分です。昔のアスペクト比のテクニックで縦の padding が使われていたのはこのためです。

Q: HTML で padding を付けるには？

スタイルシートか style 属性で CSS を使います: 。HTML には一般の要素に使える padding 属性はありません。テーブルの古い cellpadding 属性は廃止されていて、td と th の padding に置き換わっています。

padding とは

padding は要素の内側、内容と border の間の余白です。要素の背景が見えるので、ボタン、カード、バッジにゆとりを持たせるプロパティです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

青い領域が内容です。その周りの緑の帯が、全方向に 24px ずつの padding で、border はその外側にあります。

padding のショートハンド: 値は 1、2、3、4 つ

padding は 1 つの宣言で 4 辺すべてを指定します。値の数で、どの辺にどの値が入るかが決まります。上から時計回りです:

宣言	上	右	下	左
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

値が 2 つなら「上下、左右」。3 つなら「上、左右、下」。4 つなら時計回りに上、右、下、左です (英語では TRouBLe と覚えます)。

下にショートハンドを入力してみてください。ボックスが再描画され、各辺に入った値をブラウザが表示します:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

8px、8px 24px、0 0 40px、1em 5% を試してみてください。-10px のような無効な値は無視され、ボックスは最後の有効な padding を保ちます。

1 辺ずつ指定する

各辺には専用のプロパティがあります。1 辺だけ変えたいときは、4 つの値のショートハンドよりわかりやすくなります:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

ショートハンドの後に 1 辺を書くのはよくある書き方です。全体を設定してから、1 辺だけ調整します。

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

ここでは順番が重要です。padding-bottom の後に padding のショートハンドを書くと、下が 16px に戻ってしまいます。

論理プロパティ: padding-inline と padding-block

padding-left と padding-right は物理的なプロパティで、どの言語でも同じ側に付きます。論理プロパティは書字方向に従います。右から左の言語でも表示するサイトではこちらが適しています:

論理プロパティ	英語 (左から右)	アラビア語 (右から左)
`padding-inline-start`	左	右
`padding-inline-end`	右	左
`padding-inline`	左と右	右と左
`padding-block`	上と下	上と下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

padding でボックスは大きくなる (border-box でない限り)

初期状態では width は内容だけの幅で、padding はその上に加わります。padding: 20px の width: 200px のボックスは幅 240px になります:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box にすると、ボックスは 200px のままで、padding は内側から取られます。計算の全体はボックスモデルのページで解説しています。

パーセントの padding

パーセントの padding は、上下も含めた 4 辺すべてで、親の幅を基準に測られます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

16:9 の動画ボックスに使われた昔の「padding-top: 56.25%」のテクニックはここから来ています。今は aspect-ratio: 16 / 9 で同じことが直接できます。

ボタンとリンクの padding

リンクやボタンを大きくするには padding が適しています。padding は要素の一部なので、クリックやタップできる範囲に含まれるからです。margin では余白は増えますが、押せる範囲は広がりません。

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

padding に使える値

値	例	補足
長さ	`12px`, `1rem`, `0.5em`	`em` は要素のフォントサイズに合わせて変わります
パーセント	`5%`	包含ブロックの幅が基準
`0`	`padding: 0`	単位は不要
マイナス	`-10px`	無効で、無視されます
`auto`	`auto`	padding では無効 (margin では使えます)

よくある間違い

4 つの値の順番を間違える。 上、右、下、左の時計回りです。
padding を足すとボックスが広がる。 box-sizing: border-box を指定しましょう。
2 つの要素の間を padding で空ける。 要素と要素の間の余白は margin で、padding は 1 つの要素の内側の余白です。margin と padding の違いを参照してください。
インラインのリンクに縦の padding を付けて、ほかの行と重なる。 inline-block にしましょう。
マイナスの padding や padding: auto。 どちらも無効で、黙って無視されます。

よくある質問

CSS の padding とは何ですか？

padding は要素の内容と border の間の余白です。要素の一部なので、要素の背景色が見え、リンクやボタンのクリックできる範囲も広がります。

padding のショートハンドの値はどの順番ですか？

上から時計回りです: padding: top right bottom left;。値が 3 つなら上、左右、下。2 つなら上下、左右。1 つなら 4 辺すべてです。

padding を付けると要素は大きくなりますか？

初期値の box-sizing: content-box では大きくなります。padding が width と height に加わるからです。box-sizing: border-box では padding が幅の内側から取られるので、要素は指定したサイズのままです。

パーセントの padding は何を基準にしますか？

4 辺すべて、包含ブロックの幅が基準です。padding-top: 50% は親の高さではなく幅の半分です。昔のアスペクト比のテクニックで縦の padding が使われていたのはこのためです。

padding にマイナスの値は使えますか？

使えません。マイナスの padding は無効で、宣言は無視されます。内容を外側に引き出したいときは、代わりにマイナスの margin を使います。

HTML で padding を付けるには？

スタイルシートか style 属性で CSS を使います: <div style="padding: 16px;">。HTML には一般の要素に使える padding 属性はありません。テーブルの古い cellpadding 属性は廃止されていて、td と th の padding に置き換わっています。