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

paddingの位置

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

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

またパディングにはマイナスの値は指定できません。

書式

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

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

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

使用した時の例

.sample1 {padding-bottom: 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~

関連情報