要素の周囲に空白をとる方法としてマージンを紹介したが，これと似たものにパディングがある。しかし，マージンと異なる点が多くあり，まったく別物と考えた方がよい。

　パディング（“詰め物”の意）は要素の周囲に空白を設ける。マージンが枠の外側にとられるのに対して，パディングは枠の内側にとられる。パディングは，すべての要素に適用される。

　長さは単位をつけて与える方法だが，パーセント指定も可能である。基準となるのは，その要素よりひとつ上位の要素の幅，すなわちマージンや枠を指定しないときにその要素がいっぱいに表示できる幅である。padding-top，padding-bottom でも基準になるのが“幅”なので注意されたい。負の値を与えることは許されない。

　この属性は継承されない。また，初期値は“すべて 0”である。

　“その要素よりひとつ上位の要素の幅”という表現は CSS1 仕様書のもので，“その要素より上位で，その中でもっとも下位にあるブロック要素”（CSS2 仕様書の表現）のほうがよいだろう。

　パディングにも短縮属性がある。

• 1 値ならば全方向
• 2 値ならば縦方向・横方向
• 3 値ならば上・左右・下
• 4 値のときは上・右・下・左

というのはほかの短縮属性と同様である。

　一見パディングはマージンとよく似ているが，異なる点が多い。枠を指定した例をあげてみるので，違いを見ていただきたい。

　マージンとパディングは使い分けが必要だということがおわかりいただけると思う。

　枠がある場合マージンとパディングが違うというのは先ほどの例でおわかりいただけたかと思う。しかし，枠がなければ同じかというと，そうではない。

　まずひとつに，背景がある。その要素に指定された背景はマージン領域には適用されないが，パディング領域には適用される。

　もうひとつは，マージンは周囲の配置によって短縮されることがある（First step CSS Section 10 参照）が，パディングはいかなる状況でもスペースが確保される。

　このような違いが生じるのは CSS がボックスをどう構成しているかということによるところが大きい。CSS のボックスは外側から“マージン”“枠”“パディング”そして“要素の内容”，という地球の“地殻”“マントル”“外殻”“内殻”のようなかたちになっているのだが，これは，次の Section でくわしくお話しすることにしよう。

マージンとパディングの違いを簡単にまとめておくことにする。