ボーダーの内側がpadding、外側がmarginです。背景色や背景画像はpaddingの範囲まで表示されます。marginには負の値が指定できます。

CSSでデザインするときにとまどう事のひとつが余白の扱い方です。CSSではpaddingとmarginという2種類の余白があります。borderを境にして内側に付く余白がpadding、外側に付く余白がmarginです。
borderを表示させなくてもpaddingとmarginを見分ける方法としては、背景の表示範囲にあります。背景は、paddingの範囲にまで表示されますので、要素の幅や高さよりも大きい範囲で背景を表示させたいときにはpaddingを指定します。
marginには、マイナスの値を指定することで、隣接する要素に重ねることができますし、数値ではなくてautoを指定することもできます。autoは、値を自動的に設定するときに指定する記述で、ブロックレベル要素で左右のmarginをautoに指定すると、その要素は中央揃えで表示されます。

ボックスモデルの解説図

paddingおよびmarginは、ブロックレベル要素に指定することが多いのですが、インライン要素に指定することもできます。ただし、基本的にインライン要素では上下のpaddingおよびmarginを指定しても、その分の余白は空きません。img要素だけは例外で、上下のpaddingおよびmarginを指定した分、余白が空きます。

インライン要素で背景と上下のpaddingを同時に指定した場合、paddingで指定した範囲に背景が表示されます。余白や行間の指定によっては、上下の背景色に重なって内容が見えなくなる部分ができるので注意が必要です。

Internet Explorerのバグ

Internet Explorerのバージョン6まででは、floatと同じ方向のmarginの値が、2倍になってしまいます。たとえば、float:leftを指定した要素は、margin-left:10px;だと、左側に20ピクセルのマージンが空くことになるので、注意しましょう。