【padding】パディングの一括指定

paddingの位置

paddingプロパティでは、上下左右の各パディングを一括(まとめて)で指定することができます。 パディングとは、内容を表示する部分と枠線の間の空間のことで、いわゆる余白部分の事をいいます。

指定する値が1つの時は上下左右のパディングが同じ幅に、複数の値を半角スペースで区切って指定すると、値の数によって次のように変化します。

  • 値が1つの場合 …… 「上下左右」
  • 値が2つの場合 …… 「上下」「左右」
  • 値が3つの場合 …… 「上」「左右」「下」
  • 値が4つの場合 …… 「上」「右」「下」「左」

値の指定方法は数値、または%で指定する方法があります。 %で指定する場合は、paddingを設定したボックスを含んでいるボックスの横幅に対しての割合でパディングの幅(高さ)が適用されます。 上下のパディングの幅(高さ)についても、高さではなく、横幅に対しての割合となるので注意して下さい。

なおパディングには負の値は指定できません。

書式

  • padding : ……… パディング(余白)を一括で指定

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

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

使用した時の例

.sample1 {padding: 10px;}
.sample2 {padding: 10px 40px;}
.sample3 {padding: 10px 20px 40px;}
.sample4 {padding: 10px 20px 30px 40px;}

div {background:#DFF2FF;}
<div class="sample1">ここには「上下左右10px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい</div>
<div class="sample2">ここには「上下10px」「左右40px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい</div>
<div class="sample3">ここには「上10px」「左右20px」「下40px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい</div>
<div class="sample4">ここには「上10px」「右20px」「下30px」「左40px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい</div>

ブラウザ上の表示例

ここには「上下左右10px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい
ここには「上下10px」「左右40px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい
ここには「上10px」「左右20px」「下40px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい
ここには「上10px」「右20px」「下30px」「左40px」のパディングを設定しています。-10pxのように負の値は指定できませんので注意して下さい

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

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

関連情報