【padding-top】上のパディング(余白)を指定

paddingの位置

padding-topプロパティでは、上のパディング(余白)の幅を個別に指定することができます。

指定方法は数値に単位を付ける方法と%で指定する方法があります。 %で指定する場合は、padding-topを指定したボックスを含んだボックスの横幅に対する割合となります。 このプロパティは、上のパディングについての設定ですが、高さに対する割合ではないので注意して下さい。

なおパディングにはマイナスの値を指定することはできません。

書式

  • padding-top : ……… 上のパディングを個別に指定

★:実数値+単位、パーセント値+%、inherit

実数値+単位
数値にpxなどの単位をつけてパディングの幅を指定します
パーセント値+%
指定したボックスを含む親ボックス(包含ブロック)の横幅に対する割合でパディングの幅を指定します。上下のパディングであっても、高さに対する割合ではないので注意して下さい。

使用した時の例

.sample1 {padding-top: 40px;}

div {background:#DFF2FF;}
<div class="sample1">上のパディング(余白):40px</div>

ブラウザ上の表示例

上のパディング(余白):40px

対応ブラウザなどのデータ

初期値 0 値の継承 継承しない
適用可能な要素 すべての要素(tr,thead,tbody,tfoot,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報