この記事の要点

padding は要素の内側の余白（コンテンツとボーダーの間）を指定する CSS プロパティ 一括指定の順番は上 → 右 → 下 → 左（time の順）。値の数で 1〜4 個を使い分ける 個別指定は padding-top / right / bottom / left。論理プロパティ版に padding-block-start 等もある % 指定は親要素の幅を基準にする（高さ % 指定でも幅基準。要注意） box-sizing が content-box（既定）なら padding は幅に加算、border-box なら幅に含まれる

padding とは

CSS の padding は、要素のコンテンツとボーダーの間の余白（内側余白）を指定します。margin（外側余白）と対になるプロパティです。

項目	意味
margin	ボーダーの外側の余白（要素間の距離）
border	枠線
padding	ボーダーとコンテンツの間の余白（内側）
content	テキストや画像本体

関連プロパティ一覧

プロパティ	意味
padding	4 方向の一括指定
padding-top	上の内側余白
padding-right	右の内側余白
padding-bottom	下の内側余白
padding-left	左の内側余白
padding-block	論理プロパティ。上下（書字方向に依存）
padding-inline	論理プロパティ。左右
padding-block-start 等	個別の論理プロパティ

一括指定の構文

/* 1 値: 全方向同じ */
padding: 10px;

/* 2 値: 上下 / 左右 */
padding: 10px 20px;

/* 3 値: 上 / 左右 / 下 */
padding: 10px 20px 30px;

/* 4 値: 上 / 右 / 下 / 左 （time の順） */
padding: 10px 20px 30px 40px;

覚え方: 4 値のときは時計回り（上 → 右 → 下 → 左）。“Top → Right → Bottom → Left” の頭文字を取って TRBL（トラブル）と覚えるのも有名なテクニック。

個別指定

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

/* 一括指定で書き直し */
.card {
  padding: 16px 24px;
}

使える単位

単位	意味	例
px	絶対値	padding: 10px;
em	その要素の font-size 基準	padding: 1em;
rem	ルート要素の font-size 基準	padding: 1.5rem;
%	親要素の幅に対する割合（上下も幅基準！）	padding: 10%;
vw / vh	ビューポート基準	padding: 5vw;

※ 負の値は無効。padding にマイナスは指定できません（margin は可）。

% 指定の落とし穴

padding の % 値は 常に親要素の幅を基準にします。padding-top: 50% や padding-bottom: 50% も幅の 50% です（親の高さ基準ではない）。これを利用してアスペクト比固定のテクニックがあります。

/* 16:9 のレスポンシブ動画埋め込み */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;  /* 9 / 16 = 0.5625 */
  height: 0;
}
.video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

現代では aspect-ratio: 16 / 9; プロパティを使えば 1 行で済むので、こちらが推奨です。

box-sizing との関係

padding は box-sizing の値で挙動が大きく変わります。

box-sizing	width の意味	実際の幅
content-box（既定）	コンテンツ部分のみ	width + padding + border
border-box	padding と border 込み	width のまま

/* 推奨: 全要素 border-box に揃える */
*, *::before, *::after {
  box-sizing: border-box;
}

これを書いておくと width: 300px; padding: 20px; としたとき、要素全体の幅が必ず 300px に収まるため、レイアウトが直感的になります。Bootstrap / Tailwind など主要フレームワークもこれを既定としています。

論理プロパティ（縦書き / RTL 対応）

英語などの横書き左→右と日本語縦書き、アラビア語の右→左などで、padding-left / right の意味が変わることがあります。論理プロパティを使えば書字方向によらず一貫した指定が可能です。

物理プロパティ	論理プロパティ（横書き想定）
padding-top	padding-block-start
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end

padding と margin の違い

項目	padding	margin
位置	ボーダーの内側	ボーダーの外側
背景色	要素の背景色が表示される	表示されない（透明）
負の値	不可	可（要素を重ねるテクに使える）
マージンの相殺	発生しない	上下マージンが相殺される
クリック範囲	反応する	反応しない

実例 — ボタンの内側余白

.btn {
  display: inline-block;
  padding: 12px 24px;       /* 上下 12px、左右 24px */
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

「左右の padding が上下より大きい」のがボタンの定番。一般に左右 2〜3 倍が読みやすいです。

よくあるトラブル

Q: width を指定しても padding を足すと要素がはみ出る
A: box-sizing: border-box を設定すれば width に padding が含まれて崩れません。

Q: インライン要素に padding-top / bottom が効かない？
A: インライン要素（span 等）の上下 padding は行の高さに影響しません。display: inline-block や display: block にすれば効きます。

Q: padding が % 指定で予想と違う高さになる
A: padding-top / bottom の % は親の幅基準です。これを理解しないと「なぜ高さが…？」となります。

関連

• margin プロパティ — 外側余白
• border プロパティ — 枠線
• box-sizing — 幅計算の挙動
• width / height — 要素のサイズ
• aspect-ratio — アスペクト比固定
• 論理プロパティ — 書字方向に依存しない指定