下記のHTML ですが、Firefox 2.0.0.9 では、top マージンが有効にならず、また、bodyいっぱいになっていません。IE7 では、有効です。どうするとFireFox でマージンが有効になるのでしょうか?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />


<title>CSS テスト</title>
<body style="margin:0;">
<div style="width:760px;height:300px;background-color:#FF99CC;margin:0;padding:0">
<div style="width:200px;height:90px;background-color:#FFFFFF;margin:5px 5px 5px 5px;">
</div>
</div>

</body>
</html>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/11/27 11:46:23
  • 終了:2007/12/04 11:50:03

回答(2件)

id:jejekko No.1

jejekko回答回数3ベストアンサー獲得回数02007/11/27 13:34:03

ポイント35pt

隙間だけ閉じたもの

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>CSS テスト</title>

</head>

<body style="margin:0;">

<div style="width:760px;height:300px;background-color:#FF99CC;margin:0;padding:0">

<div style="width:200px;height:90px;background-color:#FFFFFF;margin:0px 5px 5px 5px;">

</div>

</div>

</body>

</html>


隙間だけ閉じたもの+内側に隙間

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>CSS テスト</title>

</head>

<body style="margin:0;">

<div style="width:760px;height:300px;background-color:#FF99CC;margin:0;padding:5px 0 0 0;">

<div style="width:200px;height:90px;background-color:#FFFFFF;margin:0px 5px 5px 5px;">

</div>

</div>

</body>

</html>

id:isogaya

回答ありがとうございます。このようなことをする必要があるというのはFirefox のバグと考えるのがよさげですね。次ではなおっているのでしょうか?

2007/11/27 16:54:01
id:quintia No.2

quintia回答回数558ベストアンサー獲得回数672007/11/27 17:33:56

ポイント35pt

CSS2.1 マージンの相殺(Collapsing margins)というCSSの仕様の様です。

(ちなみにSafariで見てもFirefoxと同じ表示をしました。)


原文がここ

http://www.w3.org/TR/CSS21/box.html#collapsing-margins


ざっと訳してあるのが

http://www.y-adagio.com/public/standards/tr_css2/box.html#collap...

http://hp.vector.co.jp/authors/VA022006/css/box.html#collapsing-...

です。


中身やボーダーが無いボックスでは(ボックスモデルについての説明は必要ないですよね?)、垂直マージンは状況によって結合して2つ以上のボックスが同じマージンを持つということだそうです。

質問の場合、入れ子になった2つの要素が、中身もボーダーも持たないので状況に合致します。

1つめのdiv要素の上マージンが0で、2つめのdiv要素の上マージンが5。

したがって、1つめのdiv要素の上マージンは、指定している0ではなくてより大きい方の(まぁ、足しても同じですけど)5になるという結果です。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>CSS</title>
</head>
<body style="margin:0;">
<div style="width:760px;height:300px;background-color:#FF99CC;margin:0;padding:0;border: 1px solid black;">
<div style="width:200px;height:90px;background-color:#FFFFFF;margin:5px 5px 5px 5px;border: 1px solid black;">
</div>
</div>
</body>
</html>

というようにボーダーを付けたり、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>CSS</title>
</head>
<body style="margin:0;">
<div style="width:760px;height:300px;background-color:#FF99CC;margin:0;padding:0;">
a
<div style="width:200px;height:90px;background-color:#FFFFFF;margin:5px 5px 5px 5px;">
b
</div>
</div>
</body>
</html>

というように中身を入れたりすると、こうなるだろうと想像している配置になりますよ。

id:isogaya

なんでこんな仕様になったんでしょう。直感的ではないですね。

W3Cがそうだというなら仕方ないですけど、

2007/11/27 19:49:52

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません