ボックスの概念

ボックスを正しく理解しよう

CSSの適用先の要素はすべてdiv、p、h1といったボックスの中に表示されます。ボックスは四角形で、テキストや画像の要素内容を表示する領域があり、 その外側にパディング(padding)ボーダー(border)マージン(margin)があり4つの部分から構成されます。各ブロックレベルにはブラウザによって デフォルトでマージンやパディングが設定されています。一般にbody要素にはマージンが設定されていて、Operaにおいてはパディングが設定されています。 ですのでCSSの書き始めにbody要素のスタイル設定でデフォルト値を消す値を書くことをオススメします。

背景についての注意として要素に設定した背景はパディングとボーダーの範囲まで反映されます。すなわちボーダーの線の幅の下側にも背景がきます。 見た目にはボーダーの方が上にあるので解りませんがその下には背景があります。

body
{
margin: 0;
padding: 0;
}
ブラウザのデフォルト値を消します。