CSSテクニックコミュのdivの子要素でmarginを指定した際に上下に正体不明の空白が生じる件について

初めて書き込ませていただきます。
下記のようなHTMLをIE6やFireFox2で表示させた場合、
headerとtitle,bodyとfooterの間に不思議な空白が
生じるのですが、理由がよくわかりません。この
空白内では、onmouseoverイベントも発生しないようです。
もくろみとしては、headerとfooterの間の空間全域で
イベントを発生させたいのですが……。

IE6とFireFoxで同じ挙動を示すことから、CSS2の仕様の
ような気がしていますが、うまく目的を達成するための
技があれば、教えていただけないでしょうか。
------------------------
<html>
<body>
<div style="background-color:yellow;">header</div>
<div onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor='white'">
<div style="margin: 20px; padding 0px; background-color: orange;">title</div>
<div style="margin: 20px; padding 0px; background-color: red;">body</div>
</div>
<div style="background-color:yellow;">footer</div>
</body>
</html>

コメント(3)

最初
全て
最新の40件

[1] mixiユーザー 02月17日 05:25

上下の空白についてはmargin:0 20px;で解決しますよ。

それかこっちを意図しているのかもしれませんが…
margin:0; padding:20px;
たぶんこっちですね。

あと直接関係はないですが、paddingに:が付いてないです（一応）。

[2] mixiユーザー 02月17日 11:22

アドバイスありがとうございます。
paddingはうっかりしてました……。

希望としては、内側のdiv二つのstyle(marginとpadding)
をそのままに、外側のdivの範囲全てでonmouseoverを発生
させたいのです。
不思議なことに、外側のdivにborderを指定すると発生する
ようになるんですよね。

[3] mixiユーザー 02月18日 12:24

http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins
↑　その動きはそれで正しいようです。何か気持ちは悪いんですけどｗ

垂直marginはpaddingやborderを挟まなければ相殺されるのでブロック範囲が変形するんですね・・・borderをつけると

普通に親ブロックにmarginをつけるじゃだめですかね・・・

ログインすると、みんなのコメントがもっと見れるよ