| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {padding-left: 値 } |
| 値 の形式 | inherit | 数値 （長さ，%） |
| 初 期 値 | 0 |
| 対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 （テーブルの行の組，ヘッダの組，フッタの組，コラムの組とコラムを除く） |
| 継 承 | しない |
padding は，いわば要素内側の余白であり，要素全体の占める領域（padding-box）と文字や画像等の表示領域（content-box）との余白を意味します。 たとえば，背景色を文字表示の領域を超えて，少し広くするような場合に使用します。
padding-leftプロパティ は 要素左側の余白 を指定するために使用します。
数値による padding の指定は，次のような単位を付けて可能です。
| 単位 | 説 明 |
|---|---|
| px | px とは画面の１画素（ピクセル） のサイズを１とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
| em | em とは現在使用中の標準フォントの高さを１とする単位です。 |
| ex | ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。 |
| ％ | 親要素の widthプロパティ の値を基準にして割合を％値で指定します。 |
以下の例では，<div class="loosepad"> 要素は，テーブルのセル内の表示領域に対して，文字の背景色の表示範囲で上に３文字，右に５文字，下に２文字，左に１文字の間隔が確保されております。 同様の形式と値で margin プロパティを指定した場合と比較してみてください。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css"> <!-- div.loosepad { padding-top:3em; padding-right:5em; padding-bottom:2em; padding-left:1em; background-color: #CC99CC;} td.backgrnd { background-color: #99CC99; width:41.8em; } --> </style> |
| HTML <body> ～ </body> |
<table>
<tr>
<td class="backgrnd">
<div>
<div class="loosepad">
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
</div>
</div>
</td>
</tr>
</table> |
| ブラウザー 表示例 | |
|---|---|
|