paddingプロパティは各辺のパディング（内容領域とボーダーの間にある余白）を一括で指定できる簡略化表記です。
各値は、半角スペースなどの空白類文字で区切って書きます。

この簡略化表記をショートハンドと言い、宣言を効率よく書くために必要な知識なのでぜひ、覚えておきましょう。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

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

初期値

0

適用される要素

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

継承

しません

パーセント値

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

メディア

visual

値の解説

<長さ>

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

<パーセント>

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

パディングと背景

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

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

paddingのサンプル

.item {
  margin: 10px;
  width: 400px;
  padding: 10px 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: 20px;
}

.item p.sample03 {
  padding: 20px 100px 0;
}

<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

一括指定する事で個別指定に比べソースも短く済みます。