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

padding-topについて

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

パディング トップ

padding-top

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

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

padding-topの記述

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

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

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

padding-top: 10px; padding: 10px 0 0 0;

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

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

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

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

padding-topサンプル

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

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

サンプル

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

div {
  padding-top: 10px;
}

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

paddingプロパティのヒント

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

背景画像のスタート位置

paddingプロパティ関連記事