-----------
ｃｓｓ部分
-----------
* {
padding:0;
margin:0;
}
h1{
margin:10px;
}
-----------
ＨＴＭＬ部分
-----------
<body>
<div style="background:#CC99FF; height:120px;">
<h1>テスト</h1>
</div>
</body>
上記のソースですが、個人的にはh1の部分がdiv部分の上のエッジ、左のエッジから10ｐｘずつ間が取られると思ってます。（見た目上はdivにpadding:10px;掛けてるのと同じ状態）
ＩＥ７や６では思い通り、divの中で10ｐｘずつ空間が取られます。
しかし、ＦｉｒｅＦｏｘやＯｐｅｒａなどのブラウザだと、divとh1ではなく、bodyとdivの間に10ｐｘずつ取られてしまいます。
しかも、左辺はＩＥと同じようにdivとh1が１０ｐｘ取られている状態です。
この辺のロジックが全く理解できません。
どなたかわかりやすく教えていただけると助かります。
宜しくお願い致します。
No.1
121
19
30pt
Yahoo知恵袋にて似た質問を見つけました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1311932...
私自身、あまりよく理解していませんが、もしお役に立てれば幸いです。
No.2
37952
30pt
まず、IEの挙動はバグです。正しいのはFirefoxやOperaです。
簡単に説明すると、マージンにとられ方には次のようなルールがあります。
・上下のマージンは相殺される
・左右のマージンは相殺されない
左右のマージンについては問題ありませんね。指定した通りにマージンが取られます。
上下のマージンは、隣接するマージンが相殺されます(親のブロックボックスを含む)。
つまり、パディングやボーダーがない場合は、マージンが隣接することになります。
この例では、
bodyの上マージン: 0
divの上マージン : 0
h1の上マージン : 10px
で、間にパディングやボーダーがなく、マージンが隣合っていますので、マージンが相殺されます(一番大きな値がマージンになる)。
結果、bodyの上マージンが10pxとなります。
マージンについては他にもルールがありますが、くわしくは仕様書をご覧ください。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#collap...
＞パディングやボーダーがない場合は、マージンが隣接することになります。
凄い解りやすい説明有難う御座います！
何か、ちょっと頭の中がクリアになった気がします。
でも、考え方としてはＩＥの方があっているような気がしないでもないですが、、、ＣＳＳって改めて難しいですね。
引き続き情報もとめてます。
No.3
10616
30pt
同じ事です。正確さでは仕様にはかなわないのですが、わかりやすさは図解が上かな？と思いますので、下のリンクではどうでしょう？私自身２ヶ月前までわからなかったです。
マージンの相殺について
http://www.techdego.com/2007/05/margin_collapsing_css.php
あと、IE がらみの情報です。その辺を６・７の挙動を解説。ここも図解です。今の質問とは直接は関係ないですが、おまけということで。比較に Firefox を使っておられます
解りやすい図解、有難う御座います。
widthの有無やheightの有無や何やらで色々と表示が変わってくるんですね。
徐々にですが仕組みが解ってきました有難う御座います。
widthとpaddingを同時に使うと、ＩＥ５とかで崩れそうですし、絶対配置しちゃった方が、手っ取り早いのでしょうか。
2
1
1
1
1
1
1
57
55
有難う御座います。
widthに100％入れて、float:left
すれば同じ表示なるのですね。