パディングプロパティは、ボックスのパディング領域の幅を指定します。

　paddingショートハンドプロパティはTOP, RIGHT, BOTTOM, LEFTの4つの領域すべてのパッディング幅を設定し、他のパディングプロパティは特定の一辺の領域のパディング幅のみを設定します。

　パディングプロパティでは、<padding-width>型を使ってパディング幅を指定します。この型は次のいずれかの値となります。

　マージンプロパティとは異なり、パディング値には負の値は指定できません。

　これらのプロパティはボックスのトップパッディング、ボトムパッディング、ライトパディング、レフトパディングの幅を指定します。

　paddingはpadding-top, padding-right, padding-bottom, padding-leftのためのショートハンドプロパティです。

　1～4個の値を指定できますが、その意味は値の数によって異なります。

　以下は1～4個の値がどのマージン領域に適応されるかを示す表です。値1はリストの先頭の値を意味します。

body { margin: 2em }         /* 全てのマージン領域の幅を 2em に指定 */
body { margin: 1em 2em }     /* トップとボトムを 1em、ライトとレフトを 2em に指定     */
body { margin: 1em 2em 3em } /* トップ=1em、ライト=2em、ボトム=3em、レフト=2em に指定 */

　上記の3行目は、ショートハンドプロパティを使わずに（個別のプロパティを使って）以下のように書くこともできます。

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;
}

　パディング領域には、backgroundプロパティによって指定した色や画像が表示されます。

　以下の例では、test1クラスのH!要素では1emの垂直パディングと2emの水平パディングを指定しています（1emは使用中のフォントのサイズの大きさ）。test2クラスでは、トップパディング=10px, ライトパディング=20px, ボトムパディング=30px, レフトパディング=40pxを指定しています。

p.test {
  margin: 0px;
  boarder: 0px;
  padding: 0px;
}

h1.test1 { 
  color:white;
  background: blue; 
  margin: 0px;
  boarder: 0px;
  padding: 1em 2em;
} 
h1.test2 { 
  color:white;
  background: blue; 
  margin: 0px;
  boarder: ;
  padding: 10px 20px 30px 40px;
} 

　上記のスタイルシートを、以下のHTMLで使うと、

<p class="test">P要素</p>
<h1 class="test1">H1要素</H1>
<p class="test">P要素</p>
<h1 class="test2">H1要素</H1>
<p class="test">P要素</p>

　次のように表示されます。