各辺のパディング（内容領域とボーダーの間にある余白）を個別に指定するプロパティです。
padding-の後に方向（leftとか）を指定する事で指定した方向に余白を取る事ができます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<長さ>｜<パーセント>｜inherit

初期値

0

適用される要素

全ての要素（テーブルの内部要素は除く）

継承

しません

パーセント値

包含ブロックの横幅に対する割合

メディア

visual

値の解説

<長さ>

パディングを長さの単位で指定します（15pxなど）。マイナス値の指定も可能です。

<パーセント>

パディングを包含ブロックの横幅に対する割合をパーセントで指定します。マイナス値の指定も可能です。

パディングと背景

パディングが指定された要素にはbackgroundプロパティの指定がパディング領域にも表示されます。
また、背景画像（background-imageプロパティ）の指定が有る場合、背景画像の開始位置はパディング領域の左上（background-positionの値が初期値の場合）になります。

しかし、IE6, 7はボーダー領域も含めて背景画像が表示されるので他のブラウザとずれてしまいます。
恐らくバグ回避が存在しないため、ハックなどを使って対処するしかないでしょう。

各paddingのサンプル

.item {
  margin: 10px;
  width: 400px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  background: #ccc;
}

.item p {
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  background: #fff;
}

.item p.sample01 {
  padding-left: 50px;
}

.item p.sample02 {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.item p.sample03 {
  padding-top: 20px;
  padding-right: 100px;
  padding-bottom: 0;
  padding-left: 100px;
}

<div class="item">
<p>パディングのサンプル default</p>
<p class="sample01">パディングのサンプル 01</p>
</div>

<div class="item">
<p class="sample02">パディングのサンプル 02</p>
<p class="sample03">パディングのサンプル 03</p>
</div>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

パディングのサンプル default

パディングのサンプル 01

パディングのサンプル 02

パディングのサンプル 03

このサンプルでは上下左右を個別に指定していますが、個別に指定していると効率が悪くなってしまうで、そのような場合は、paddingプロパティを使う事で一括指定ができます。