マージンの話
（注）検証はIE6, IE7, IE8, Firefox, Opera, Google Chrome, Safari にて行いました。IE以外はヴァージョンの違いは気にしなくても良い内容だと思います。
<html>, <body>, <p> のデフォルトのマージンがどうなっているか調べるために、
css↓
html {
background:#000;
}
body {
background:#fff;
}
p {
background:#f00;
}
p span {
background:#0ff;
}
html↓
<html> <body> <p>背景が黒いのはhtml</p> <p>背景が白いのはbody</p> <p>背景が赤いのはp</p> <p>背景が青いのは<span>pの中のspan</span></p> </body> </html>
としたとき、各ブラウザでの表示は以下のようになりました。
（図１）
（↑IE6での表示。他もだいたいこんな感じ）
これは、cssの１行目に「すべてのpaddingを0にする」という
* {
padding:0;
}
を加えても変わらなかったので、余白はmarginによるものだと分かります。
ただし、FirefoxとSafariにおいては、<p>の内部にわずかな隙間ができているように見えます。
<p>のpaddingを0にしたはずなのに、おかしいなぁ、と思いましたが、しばらくして原因は別のところにあることが分かりました。「line-height」の値を変えたら表示が変化したのです。なるほど。「font-size」や「line-hight」のデフォルト値についての比較はここでは省略します。
ということで備忘録その１として
- <body>には上下左右に10px程度の余白ができる（その値はブラウザに依存）
- <p>には上下に1emの余白ができる（ただし詳細説明が必要なので下記参照）
<p>の余白に関してですが、IE6とIE7では違うようです。おそらくバグです。おそらくIEのバグです。おそらくIFE（Internet Fuckin’ Explorer）のバグです。IEのバグです。大切なことなので４回書きました。font-sizeを色々変えても、IE6とIE7だけ間隔が変わらないのです。1em自体の長さ（１文字文の長さ）はIE6でもIE7でも正しく解釈するのですが、<p>の上下の余白はおそらくデフォルトのfont-sizeの1emを取っているのではないかと思われます。
ところで、上の表示結果をみれば「あれ？」と思うかもしれません。上下に1emの余白ではなく、上か下かに1em、あるいは上下に0.5emではないかと。そして、一番上と一番下が変です。でも、
p {
margin:1em 0;
}
とやっても同じ結果でしたので、確かに上下に1emのマージンをとっています。
それについては「default <p> margins」にはこうあります。
> Without css a <p> gets a blank line before and after > 1) even when there is an image > 2) except when the <p> is on top. > But when changing the margins with css, these two behaviours are gone. > Is there a workaround for this? The reason (1) and (2) happen is because, with most browsers, there’s a default style rule that behaves like this: p { margin: 1em 0; } So <p> will always have a single line-height margin on top and on bottom, regardless of contents (images, texts, input elements, whatever). If "the <p> is on top", I’m not sure exactly what you mean by this. On top of what? My best guess is that you mean on top of another <p>. In this case, the vertical margins collapse, which means that the space between the two <p> tags (or any other elements with vertical margins) will be the greater of the two margins, not the sum of the two margins. For two unstyled <p> tags, that means there will only be 1em of space between them, not 2em (as it would be if you added the margins).
質問者の「except when the <p> is on top.（<p>が一番上にあるときは例外）」に対して回答者は「On top of what?（何の一番上？）」と尋ねていますが、「同一ボックス内の一番上」という意味だと思います。実際、（図１）では一番上と一番下が例外のようになっています。
これについては、
body {
background:#fff;
border:1px solid #00f; /* ←追加 */
}
と、<body>にborder（ここでは幅1pxの青直線）を引くと
一番上の上側と、一番下の下側に余白が出ました。ただしIE6, IE7は違ってこんな感じ。
↓
これについては、現象を一般化してそれを覚えるのは脳味噌のシワの無駄使いのような気がするので、不具合が出たらその都度対処した方が良いような気がします。
それよりも興味深いのは、「the vertical margins collapse, which means that the space between the two <p> tags (or any other elements with vertical margins) will be the greater of the two margins, not the sum of the two margins.」（<p>タグ（あるいは上下にマージンを持つ他の要素）間のスペースは、大きいほうのマージンを取り、和にはならない）と言われている点です。
「marginとは – はてなキーワード」にも、注意に書いてありますが、
上下方向にmarginを持つものが隣接する場合、マージンの相殺がある
ようです。ただし、
隣接するマージン値が同符号の場合は絶対値の大きい方をとり、異符号の場合は和になる
という具合に。これは、実際に試してみると<p>でも<div>でも<h1>～<h6>でも同じでした。
（例）
css
↓
div {
background:#fee;
border:1px #000 solid;
}
p.m1 {
background:#200;
color:#fff;
margin:100px 0 20px;
}
p.m2 {
background:#800;
color:#fff;
margin:100px 40px -20px;
}
p.m3 {
background:#880;
color:#fff;
margin:100px 80px -20px;
}
p.m4 {
background:#080;
color:#fff;
margin:-50px 120px 100px;
}
html
↓
<div> <p class="m1">（１）余白：上100px 下 20px</p> <p class="m2">（２）余白：上100px 下-20px</p> <p class="m3">（３）余白：上100px 下-20px</p> <p class="m4">（４）余白：上-50px 下100px</p> </div>
結果
↓
（１）余白：上100px 下 20px
（２）余白：上100px 下-20px
（３）余白：上100px 下-20px
（４）余白：上-50px 下100px
IE8, Firefox, Opera, Google Chrome, Safari で、こんな感じに表示されています。
ただし、この場合もIE6とIE7は表示が崩れました。marginにマイナス値を与えたのが原因でしょう。でもそんなケースは少ないし、ハックするのが面倒なので、代わりにここにその醜態を晒しておきます。
IE6
IE7