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

padding-rightについて

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

パディング ライト

padding-right

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

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

padding-rightの記述

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

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

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

padding-right: 10px; padding: 0 10px 0 0;

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

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

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

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

padding-rightサンプル

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

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

サンプル

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

div {
  padding-right: 10px;
}

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

paddingプロパティのヒント

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

背景画像のスタート位置

paddingプロパティ関連記事