解 説

body要素のmarginはどのような挙動をするのでしょう。
一見ブラウザの表示領域の外に存在するように思えますが、実際はブラウザの表示領域内に存在します。
下の例ではmargin領域(黄色)が存在してその内側にボーダー(緑色)があり、さらにその内側にpadding領域(ピンク)があり、そしてコンテンツ領域(水色)になるわけです。
body2
面白い現象はmargin領域は透明ですから色は存在しません。bodyの背景色はボーダーより内側に着色されそうですが、実際にはmargin領域にまで着色されます。なにもない場合は、body要素で指定した背景色(または、背景画像)が表示されることになっているのです。
次の例ではbody要素にピンクの背景が着いています。青い背景は子要素のdivに背景色を着けたものです。
ブラウザの左端と上端の隙間がブラウザが用意しているbodyのmarginとなります。
body1

HTMLコード

CSSコード

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

CSSコード