CSS ・ 余白・サイズ
padding
内側の余白
要素の枠線の内側、内容との間の余白を指定します。上下左右をまとめて、または個別に指定できます。
01
サンプルコード
HTML
1<div class="box p8">padding: 8px</div>
2<div class="box p24">padding: 24px</div>
3<div class="box p-mix">padding: 8px 32px</div>
CSS
1.box {
2 display: inline-block;
3 margin: 0 8px 8px 0;
4 background: #f6ead8;
5 border: 1px solid #b68235;
6}
7.p8 {
8 padding: 8px;
9}
10.p24 {
11 padding: 24px;
12}
13.p-mix {
14 padding: 8px 32px;
15}
02
実行結果
ブラウザでの表示
03
解説
padding は、要素の内容と枠線（border）の間の余白です。背景色は padding の部分まで塗られます。
値を1〜4つ並べて指定でき、4つの場合は「上・右・下・左」の時計回りになります。2つなら「上下・左右」です。
外側の余白は margin で指定します。ボタンの押せる範囲を広げたいときなど、背景ごと大きくしたい場合は padding を使います。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
padding: 16px | 上下左右すべて16px |
padding: 8px 16px | 上下8px、左右16px |
padding: 4px 8px 12px | 上4px、左右8px、下12px |
padding: 1px 2px 3px 4px | 上・右・下・左の順 |
padding-top など | 1方向だけ指定 |
押しやすいボタンにする
padding で背景ごと大きくすると、クリック・タップできる範囲が広がります。
HTML
1<a class="btn" href="#">予約する</a>
CSS
1.btn {
2 display: inline-block;
3 padding: 12px 28px;
4 background: #b68235;
5 color: #fff;
6}
注意点
- 01width を指定した要素に padding を付けると、その分だけ幅が大きくなります（box-sizing: border-box で回避）。
- 02padding に負の値は指定できません。