paddingプロパティ《ボックス周囲の余白を指定》-CSS-

paddingについて

paddingはコンテンツボックス周辺の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えます。

パディング

padding

コンテンツ(要素)周囲の余白を指定する

コンテンツボックス周辺の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えるのにpaddingプロパティを使用します。

paddingの記述

セレクタは対象とする要素、クラス名、id名が指定できます。

カテゴリ ボックス
適用できる要素 すべての要素
継承 なし
指定できる 長さのサイズ値、パーセント値
負の値(-10pxなど)は指定できません
初期値 0

paddingの値は1個から4個まで指定可能です。複数指定する場合は、各値の間に半角スペースを入れて指定します。

各値ごとに適用される場所は下記表になります。

padding :10px;
(4辺の余白)
4つの辺に10pxの余白
padding:10px 20px;
(上下、左右の余白)
上下に10px、左右に20pxの余白
padding:10px 20px 30px;
(上、左右、下の余白)
上に10px、左右に20px、下に30pxの余白
padding:10px 20px 30px 40px;
(上、右、下、左の余白)
上に10px、右に20px、下に30px、左に40pxの余白

paddingは上(padding-top)、右(padding-right)、下(padding-bottom)、左(padding-left)で個別に指定することも可能です。

ボックスの余白に影響するプロパティ

ボックスの余白に影響するプロパティはpaddingのほかにborder、marginがあります。

ボックスに影響する余白の関係性は下記図のように適用され、paddingはコンテンツボックス周辺でborder内側の余白を決定します。

paddingプロパティで指定可能な範囲

padding値別サンプル

「影響範囲を表示」では、paddingの影響範囲を見やすく表示するためdiv要素にsample-backimg(10pxの青、グレーの四角)画像を交互に表示しています。また、コンテンツボックス部分は白抜きしています。paddingは画像の表示指定はありません、指定する場合はbackgroundなどを使用します。

サンプルのコンテンツボックスはwidth:300px;、height:50pxで指定しています。

paddingの値が1個

サンプル(4辺:10pxのpaddingを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  padding: 10px;
}

※「影響範囲を表示」ではpaddingの影響範囲を見やすくするため背景画像(10pxの四角)を表示しています。コンテンツボックスはwidth:300px;、height:50pxで指定しています。

paddingの値が2個

サンプル(上下:10px、左右:20pxのpaddingを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  padding: 10px 20px;
}

※「影響範囲を表示」ではpaddingの影響範囲を見やすくするため背景画像(10pxの四角)を表示しています。コンテンツボックスはwidth:300px;、height:50pxで指定しています。

paddingの値が3個

サンプル(上:10px、左右:20px、下:30pxのpaddingを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  padding: 10px 20px 30px;
}

※「影響範囲を表示」ではpaddingの影響範囲を見やすくするため背景画像(10pxの四角)を表示しています。コンテンツボックスはwidth:300px;、height:50pxで指定しています。

paddingの値が4個

サンプル(上:10px、右:20px、下:30px、左:40pxのpaddingを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  padding: 10px 20px 30px 40px;
}

※「影響範囲を表示」ではpaddingの影響範囲を見やすくするため背景画像(10pxの四角)を表示しています。コンテンツボックスはwidth:300px;、height:50pxで指定しています。

paddingは上下左右を個別に指定することも可能です。下記表が個別箇所とpaddingでの記述の仕方になります。

上側の余白を指定
padding-top: 10px;
padding: 10px 0 0 0;
右側の余白を指定
padding-right: 10px;
padding: 0 10px 0 0;
下側の余白を指定
padding-bottom: 10px;
padding: 0 0 10px 0;
左側の余白を指定
padding-left: 10px;
padding: 0 0 0 10px;

paddingプロパティのヒント

背景画像(background)を指定している場合、paddingで指定した余白部分にも画像が表示されます。また、背景画像のスタート位置はborderのコンテンツボックス側からになります。

背景画像のスタート位置

paddingプロパティ関連記事