人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記の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>

●質問者: isogaya
●カテゴリ:ウェブ制作
✍キーワード:2.0 BODY CSS firefox HTML
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● jejekko
●35ポイント

隙間だけ閉じたもの

<!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>

◎質問者からの返答

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


2 ● quintia
●35ポイント

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>

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ