padding は，いわば 要素内側の余白 であり，要素全体の占める領域（border-box）から境界線を除く部分（padding-box）と文字や画像等の表示領域（content-box）との余白を意味します。　たとえば，背景色を文字表示の領域を超えて，少し広くするような場合に使用します。

padding プロパティ は，指定した要素の表示領域（content-box）から 境界線 までの余白 （padding-top，padding-right， padding-bottom，padding-left） を一括指定します。

すなわち，

1. 上の値：　padding-top，
2. 右の値：　padding-right，
3. 下の値：　padding-bottom，
4. 左の値：　padding-left，

上の 1 ～ 4 に示すとおり，値の形式 として， 半角ブランクを挟んで４つまでの値が指定できます。　このとき，

1. 指定する値の個数にかかわらず，値の順序は，最初から， 上の値 → 右の値 → 下の値 → 左の値 と決まっています。　（上から時計回り）
2. 値を３つ指定した場合は，省略された 左の値 は 右の値 と同じになります。　
3. 値を２つ指定した場合は，さらに，省略された 下の値 は 上の値 と同じになります。
4. 値を１つだけしか指定しない場合は，それが 上，右，下，左 のすべての値になります。

要素の余白を指定するプロパティとしては，ほかに margin（マージン）があります。　margin プロパティでは，このプロパティを指定した要素とその外側にある他の要素との間の余白（マージン）を指定します。

数値による padding の指定は，次のような単位を付けて可能です。

以下の例では，<div class="loosepad"> 要素は，テーブルのセル内の表示領域に対して，文字の背景色の表示範囲で上に３文字，右に５文字，下に２文字，左に１文字の間隔が確保されております。　同様の形式と値で margin プロパティを指定した場合と比較してみてください。

<style type="text/css">
<!-- 
   div.loosepad { padding: 3em 5em 2em 1em;
                  background-color: #CC99CC;}
   td.backgrnd { background-color: #99CC99; width:41.8em; }
-->
</style>

 <table>
  <tr>
   <td class="backgrnd">
    <div>
     <div class="loosepad">
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
     </div>
    </div>
   </td>
  </tr>
 </table>