CSSのmarginに関して質問です。



-----------
css部分
-----------

* {
padding:0;
margin:0;
}

h1{
margin:10px;
}

-----------
HTML部分
-----------
<body>
<div style="background:#CC99FF; height:120px;">
<h1>テスト</h1>
</div>
</body>


上記のソースですが、個人的にはh1の部分がdiv部分の上のエッジ、左のエッジから10pxずつ間が取られると思ってます。(見た目上はdivにpadding:10px;掛けてるのと同じ状態)

IE7や6では思い通り、divの中で10pxずつ空間が取られます。

しかし、FireFoxやOperaなどのブラウザだと、divとh1ではなく、bodyとdivの間に10pxずつ取られてしまいます。

しかも、左辺はIEと同じようにdivとh1が10px取られている状態です。

この辺のロジックが全く理解できません。

どなたかわかりやすく教えていただけると助かります。
宜しくお願い致します。

回答の条件
  • 1人2回まで
  • 登録:2007/07/12 09:17:04
  • 終了:2007/07/17 08:45:40

回答(3件)

id:imo758 No.1

imo758回答回数121ベストアンサー獲得回数192007/07/12 09:54:42

ポイント30pt

Yahoo知恵袋にて似た質問を見つけました。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1311932...

私自身、あまりよく理解していませんが、もしお役に立てれば幸いです。

id:ruijio

有難う御座います。

widthに100%入れて、float:left

すれば同じ表示なるのですね。

2007/07/12 20:20:13
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522007/07/12 15:49:58

ポイント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...

id:ruijio

>パディングやボーダーがない場合は、マージンが隣接することになります。

凄い解りやすい説明有難う御座います!

何か、ちょっと頭の中がクリアになった気がします。

でも、考え方としてはIEの方があっているような気がしないでもないですが、、、CSSって改めて難しいですね。

引き続き情報もとめてます。

2007/07/12 20:23:59
id:Q-A No.3

Q-A回答回数106ベストアンサー獲得回数162007/07/13 00:16:15

ポイント30pt

同じ事です。正確さでは仕様にはかなわないのですが、わかりやすさは図解が上かな?と思いますので、下のリンクではどうでしょう?私自身2ヶ月前までわからなかったです。

マージンの相殺について
http://www.techdego.com/2007/05/margin_collapsing_css.php


あと、IE がらみの情報です。その辺を6・7の挙動を解説。ここも図解です。今の質問とは直接は関係ないですが、おまけということで。比較に Firefox を使っておられます

http://journal.mycom.co.jp/special/2006/ie7beta2/016.html

id:ruijio

解りやすい図解、有難う御座います。

widthの有無やheightの有無や何やらで色々と表示が変わってくるんですね。

徐々にですが仕組みが解ってきました有難う御座います。

widthとpaddingを同時に使うと、IE5とかで崩れそうですし、絶対配置しちゃった方が、手っ取り早いのでしょうか。

2007/07/14 18:38:25

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

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

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

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

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