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

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取られている状態です。

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

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


●質問者: ruijio
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:BODY CSS h1 margin padding
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● imo758
●30ポイント

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

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

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

◎質問者からの返答

有難う御座います。

widthに100%入れて、float:left

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


2 ● wizemperor
●30ポイント

まず、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...

◎質問者からの返答

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

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

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

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

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


3 ● Q-A
●30ポイント

同じ事です。正確さでは仕様にはかなわないのですが、わかりやすさは図解が上かな?と思いますので、下のリンクではどうでしょう?私自身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

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



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