padding-top,right,bottom,left:要素の内側の余白を個別に指定する

適用対象 全ての要素(テーブルの内部要素以外)
継承 しない

padding-top,right,bottom,leftプロパティは、要素の指定した辺に内部余白を設定する際に使用します。マイナス値を指定することもできますます。

パディングを一括で指定したい場合には、paddingを使用します。

padding-top,right,bottom,leftに与えられる値

padding-top,right,bottom,left: 値;
[px]や[em]などの単位で余白を取る場合に使用します。
padding-top,right,bottom,left: 値%;
親要素の幅に対して%値で余白を指定する場合に使用します。

padding-top,right,bottom,leftの使用サンプル

CSS
.sample_box {
 border: 1px solid #666666;
 padding-top: 10px;
 padding-right: 100px;
 padding-bottom: 20px;
 padding-left: 10px;
}
.box_sample01 {
 border: 1px solid #666666;
 background-color:#FFE4B5;
 padding-top: 5px;
 padding-bottom: 10px;
 padding-left: 10px;
 margin: 0px 0px 10px 0px;
}
.box_sample02 {
 border: 1px solid #666666;
 background-color:#FFE4B5;
 padding-top: 2em;
 padding-bottom: 2em;
 padding-left: 2em;
}
XHTML
<div class="sample_box">

<div class="box_sample01">
box_sample01<br />
[padding-top: 5px;]<br />
[padding-bottom: 10px;]<br />
[padding-left: 10px;]<br />
paddingサンプル<br />
</div>

<div class="box_sample02">
box_sample02<br />
[padding-top: 2em;]<br />
[padding-bottom: 2em;]<br />
[padding-left: 2em;]<br />
paddingサンプル<br />
</div>

</div>
表示確認
text_sample01
[padding-top: 5px;]
[padding-bottom: 10px;]
[padding-left: 10px;]
paddingサンプル
text_sample02
[padding-top: 2em;]
[padding-bottom: 2em;]
[padding-left: 2em;]
paddingサンプル

padding-xに関連するCSSプロパティ

余白の指定
margin 要素の外側の余白(マージン)を指定する
margin-bottom 要素の底辺に当たる外側の余白(マージン)を指定する
margin-left 要素の左辺に当たる外側の余白(マージン)を指定する
margin-right 要素の右辺に当たる外側の余白(マージン)を指定する
margin-top 要素の上辺に当たる外側の余白(マージン)を指定する
padding 要素の内側の余白を指定する
padding-bottom 要素の内側の底辺側に当たる余白を指定する
padding-left 要素の内側の左辺側に当たる余白を指定する
padding-right 要素の内側の右辺側に当たる余白を指定する
padding-top 要素の内側の上辺側に当たる余白を指定する