マージンの話
この記事は 1 年 1 ヶ月 20 日 前に投稿されたものです。間違いに気づいたらその都度修正していますが、今読んだらおかしな点もあるかもしれません。ご了承ください。（注）検証は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
More From charlie432
charlie432 Recommends
- Top 7 Ways to Greenify Your Home Entertainment System (U.S. Green Technology)
- Energy-efficient refrigerators offer 8-inch LCD screens (U.S. Green Technology)
関連記事かも？
- [html] formの部品とheight値について
- テーブルと枠と、時々、コラム
- jQueryのcssで!importantを指定する方法のメモ
- スマホでiScrollを使わず、疑似「position:fixed」を実現させるテスト
- リキッド・レイアウト ３種
こちらの方が、より関連しているかも？
- [html] formの部品とheight値について htmlで、form内のよく使う部品（<textarea>、<input type="text">、<input type="button">、<select>）の高さについて、 IE6 IE7 IE8.0.3001.187021C Safari 5.0.4(7533.20.27) Google Chrome 10.0.648.151 Opera...
- IE6対策の覚え書き 2011.03.28 好んでInternet Explorer 6を使っている人もいるので、やはり対策は必要かと思って。 というか、この記事はIE6で見ないと意味ないかも。 プロパティ名に「_」をつけてCSSで解決 p { background:#f00; /* 背景を赤に...
- Greensleeves あれこれ 楽器を演る人なら、大抵は練習したことがあるのではないでしょうか。私の場合、某ギター誌の村治佳織さんのコラムに載っていた譜例で試してみました。 Qu Nio es este? (Greensleeves) 子どもの演奏による、チェロとハープのための greensleeves Greensleeves 大自然の写真と悲しげなメロディが涙を誘う...
- 大きな画像を自動リサイズ 最近、色々なサイトで綺麗な絵・写真、面白い画像を見るのが楽しみです。 良い絵は、良い音楽と同様、いつでも手元に置いてすぐに取り出せる状態にしておきたいので、ダウンロードして、ある程度たまったらテーマ別に記事を書いて、このブログに貼り付けています。 しかし。 画像は出来る限り大きく見たい。けれども、あまりに大きいと表示に時間がかかるし、ブログの容量には限度がある。 そんな悩みが以前からありました。 ブログの容量に関しては、MediaFireやPicasa Web Albumsなどのウェブアルバムが無料で利用できるのでそれを活用しています。今、メインで使っているのははてなフォトライフです。複数画像を一括でアップできるので便利です。 あ、便利といえば、 はてなダイアリーは、自動でキーワードにリンクが付き、語句の説明や、その語を含む日記を読むことが出来るので重宝しています。たまに、記事をはてなへアップし、そのソースをそのままこちらに貼り付けることもしています。...
- ハコにキャパ制約を設けてクリムゾンやパープルを入れる #test20110330 .h150 { background:#00f; width:300px; height:150px; } #test20110330 .h_auto {...
[...] マージンの話にも書いたとおり、ブラウザにより値は異なりますが、デフォルトで<body>や<p>は余白を持っているので、最初に一括で初期化したい場合に [...]