全ての要素は、ボックスと呼ばれる四角い領域を持ちます。その領域構造は、下記のようになっています。

■ 背景色・背景画像
・　内容領域とパディング領域に表示される色や画像

■ 内容領域
・　テキストや画像など、要素の内容が表示される領域
・　widthプロパティやhrightプロパティでサイズ調節可能

■ パディング
・　要素内容が表示される部分とボーダーとの間
・　背景色は、この部分にも適用される

■ 枠線（ボーダー）
・　パディングの外側に設定されるもの

■ マージン
・　ボーダーの外側に設定される余白
・　背景色は、この部分には適用されない

・　ボーダーの外側に余白が必要な時
・　余白に背景色（画像）を適用したくない時

・　ボーダーの内側に余白が必要な時
・　余白に背景色（画像） を適用したい時

IE5.x, 6では、float指定したボックスに左のマージンを指定すると、左側が指定された値の2倍のマージンになってしまうことがあります。 その回避方法として、パディングを使用したり、ボックスに「display：inline；」を指定することにより回避出来ます。