padding
初級読み方：パディング｜英語：Padding
要素の内側の余白で、content と border の間の距離だよ。いつ使う？ ボタンの文字と枠線の間に余白を作りたい、カードの中身と枠の間にスペースを空けたいときに使うよ。間違いやすいポイント: paddingを増やすとデフォルトでは要素全体のサイズが大きくなるよ。box-sizing: border-box; を指定すれば、paddingを含めたサイズでwidthが計算されるよ。
やさしい説明
padding（パディング）とは、要素の内側の余白です。内容と枠線（border）の間の距離を指定します。
プレゼントの箱に例えると、paddingは「緩衝材（プチプチ）」です。中身（content）を箱の壁（border）から離して守る役割です。
paddingを増やすと要素の見た目のサイズが大きくなります。ボタンやカードの「内側のゆとり」を作るのに使います。
具体例・使い方
/* ボタンに内側の余白をつける */
.btn { padding: 12px 24px; }
/* カードの内側にゆとりを作る */
.card { padding: 24px; }
/* 上下左右を個別に指定 */
.header { padding-top: 16px; padding-bottom: 16px; }いつ使う？
ボタンの文字と枠の間にスペースを作るとき、カードの内側にゆとりを持たせるとき、テキストが枠にくっつかないようにするときに使います。
間違いやすいポイント
❌ marginとpaddingを混同する
margin = 外側（要素同士の間隔）、padding = 内側（内容と枠の間）です。背景色はpaddingの領域まで塗られますが、marginの領域には塗られません。
❌ paddingを増やしたら要素が大きくなった
box-sizing: border-box; を指定すれば、paddingを増やしてもwidthで指定したサイズを超えません。
よくある疑問
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を使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →