content表示する内容
テキストや画像が置かれる、要素のいちばん内側です。
padding
要素の内側に余白をつくるプロパティ。上・右・下・左の広がりを、動かしながら確かめます。
遊んでみよう
内側の余白
CONTENT内容
CSS
.element padding: 32px 48px;
値のパターン
paddingの構成要素
padding内側の余白
背景色はpaddingの領域まで広がります。負の値は指定できません。
border要素の境界線
paddingの外側を囲みます。そのさらに外側がmarginです。
早見表
時計回りに上 → 右 → 下 → 左。向かい合う値が同じなら短く書けます。
01
24px4方向すべて上下左右02
24px 48px上下・左右縦 / 横03
12px 24px 36px上・左右・下上 / 横 / 下04
12px 24px 36px 48px4方向を個別上 / 右 / 下 / 左よくある使い方
01
ボタンを押しやすくする
文字のまわりに余白をつくると、見た目とクリックできる範囲を広げられます。
padding: 12px 20px;02
カードの内側を整える
枠と内容の間に余白をつくり、情報を読みやすくまとめます。
padding: 24px;03
入力欄にゆとりをつくる
文字と入力欄の境界を離すと、フォームの内容を読みやすくできます。
padding: 12px 16px;ポイント
marginとの違いは、内か外か。
paddingは境界線の内側、marginは外側の余白です。背景を含めてクリックできる範囲を広げたいボタンなどには、paddingが向いています。
関連するCSSも見てみよう。
padding と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。