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

padding-bottomについて

padding-bottomはコンテンツボックス周辺下側の余白の大きさを指定します。

パディング ボトム

padding-bottom

コンテンツ周囲下側の余白を指定する

コンテンツボックス周辺下側の余白の大きさを指定し、見栄えを整えるのにpadding-bottomプロパティを使用します。

padding-bottmの記述

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

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

padding-bottomはボックス周辺下側の余白を指定する時に使用しますが、以下のように指定することでpaddingでも下側の余白を指定できます。

padding-bottom: 10px; padding: 0 0 10px 0;

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

ボックスに影響するプロパティはpadding-bottomを含むpadding類のほかにborder、marginがあります。

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

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

padding-bottomサンプル

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

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

サンプル

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

div {
  padding-bottom: 10px;
}

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

paddingプロパティのヒント

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

背景画像のスタート位置

padding-bottomプロパティ関連記事