body要素のマージン〜CSS　marginの挙動

body要素のmarginはどのような挙動をするのでしょう。
一見ブラウザの表示領域の外に存在するように思えますが、実際はブラウザの表示領域内に存在します。
下の例ではmargin領域（黄色）が存在してその内側にボーダー（緑色）があり、さらにその内側にpadding領域（ピンク）があり、そしてコンテンツ領域（水色）になるわけです。

面白い現象はmargin領域は透明ですから色は存在しません。bodyの背景色はボーダーより内側に着色されそうですが、実際にはmargin領域にまで着色されます。なにもない場合は、body要素で指定した背景色（または、背景画像）が表示されることになっているのです。
次の例ではbody要素にピンクの背景が着いています。青い背景は子要素のdivに背景色を着けたものです。
ブラウザの左端と上端の隙間がブラウザが用意しているbodyのmarginとなります。

HTMLコード

<div class="a">A</div>

CSSコード

body {
	background-color: #FCF;
}
div.a{
	background-color:#CFF;
	width:300px;
	height:300px;
}

body要素のmarginを0にするとdivはブラウザの表示領域にぴったりと引っ付き、ピンクの隙間はなくなります。
一部のブラウザはpaddingによる空白も加わりますのでpaddingも0としておきます。

CSSコード

body {
	background-color: #FCF;
        margin:0;
        padding:0;
}
div.a{
	background-color:#CFF;
	width:300px;
	height:300px;
}