padding
初級読み方：パディング｜英語：Padding
要素の内側の余白で、content と border の間の距離だよ。
やさしい説明
padding（パディング）とは、要素の内側の余白です。内容と枠線（border）の間の距離を指定します。
プレゼントの箱に例えると、paddingは「緩衝材（プチプチ）」です。中身（content）を箱の壁（border）から離して守る役割です。
paddingを増やすと要素の見た目のサイズが大きくなります。ボタンやカードの「内側のゆとり」を作るのに使います。
具体例・使い方
/* ボタンに内側の余白をつける */
.btn { padding: 12px 24px; } /* 上下12px 左右24px */
/* カードの内側にゆとりを作る */
.card { padding: 24px; } /* 上下左右すべて24px */
/* 上下左右を個別に指定 */
.section {
padding-top: 32px;
padding-right: 16px;
padding-bottom: 32px;
padding-left: 16px;
}
/* shorthandで4方向まとめて指定（時計回り：上 右 下 左） */
.box { padding: 32px 16px 32px 16px; }paddingの値の書き方パターン
padding: 16px— 上下左右すべて同じpadding: 16px 24px— 上下16px、左右24pxpadding: 8px 16px 24px— 上8px、左右16px、下24pxpadding: 8px 16px 24px 32px— 上・右・下・左を個別指定（時計回り）
marginとpaddingの違い
- padding — 内側の余白。背景色・背景画像が適用される領域
- margin — 外側の余白。要素と要素の間の距離を調整する。背景色は影響しない
ボタンの「文字と枠の間のゆとり」を作るには padding、複数のボタンを並べるときの「ボタン同士の間隔」は margin で調整します。
いつ使う？
- ボタンの文字と枠の間にスペースを作るとき
- カードやパネルの内側にゆとりを持たせるとき
- テキストが枠にくっつかないようにしたいとき
- クリック・タップ領域を広げて操作しやすくしたいとき
間違いやすいポイント
❌ paddingを増やしたら要素が想定より大きくなった
デフォルトでは width にpaddingが加算されるので、全体サイズが変わります。box-sizing: border-box を指定するとwidthの内側にpaddingが収まり、サイズが変わりません。
/* ✅ border-boxを使うとwidthを超えない */
* {
box-sizing: border-box;
}
.card {
width: 300px;
padding: 24px; /* widthの中に収まる */
}❌ marginとpaddingを混同する
内側のゆとりは padding、外側の間隔は margin です。背景色はpaddingの領域まで塗られますが、marginには塗られません。この違いで判断しましょう。
よくある疑問
Q: paddingを増やすと要素の幅が変わる？
A: デフォルトでは変わります。box-sizing: border-box を指定すると、paddingを含めた幅になり、意図通りのサイズになります。
Q: paddingの書き方は？
A: padding: 10px;（全方向）、padding: 10px 20px;（上下/左右）、padding: 10px 20px 30px 40px;（上/右/下/左、時計回り）と書けます。
Q: paddingに負の値は使える？
A: いいえ、paddingに負の値は使えません。負の余白が必要な場合はmarginを使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →