CSSテクニックコミュのBOXの余白が上手く表示されない

申し訳ありません。
教えて下さい。

【Firefox】でBOXの余白が上手くとれずに、困っています。
【IE6】では上手く表示されるのですが・・・。

左画像のように表示させたいのですが、右の画像のように
表示されてしまいます。
Wrap1の中でmarginを上下左右10pxづつとりたかったの
ですが。
記述ミスでしょうか？また、回避策等があればお教え下さい。

********css********
body {
margin:0;
padding:0;
background-color:#ffffff;
}

#Wrap{
margin:0;
padding:0;
width:500px;
background-color:#ff0000;
}

#Wrap2{
margin:10px;
width:480px
padding:0;
background-color:#0000ff;
}

********ソース********
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<link rel="stylesheet" href="base.css" type="text/css" />
<title>hoge</title>
</head>

<body>
<div id="Wrap">
<div id="Wrap2">hogehogehogehogehoge</div>
</div>
</body>
</html>

初歩的なもので申し訳ありませんが、よろしくお願いします。

コメント(20)

最初
全て
最新の40件

[1] mixiユーザー 04月20日 18:51

BOXの高さを指定してないからだと思います。

[2] mixiユーザー 04月20日 19:24

もしかしたら、箱ではなくて内容（テキストなど）にmargin指定したほうが、
安全に上下左右の余白を出せるかもしれません。
ごめんなさい、よく検証していませんが。詳しい方のレスをお待ちします。

[4] mixiユーザー 04月20日 22:27

>つねさん
ありがとうございます。
height指定しても解消されませんでした。

>さゆキャンディさん
ありがとうございます。
<p>に指定してみましたが、やはり解消されませ
でした。

>辻本珈琲店さん
ありがとうございます。
paddigに指定したら上手く表示されました。
ただ、widthとpaddingを同じセレクタで指定したく
なく頭を悩ませております。

みなさん本当に有難うございます。
そもそも何故こういった表示になってしまうんでしょうか？
ブラウザで見え方も違いますし。ごく普通のマークアップ
だと思って、思いがけず躓いてしまい、ちょっとオロオロ
してます（笑）。すんません。

[6] mixiユーザー 04月21日 00:01

paddinを挟まずに入れ子にした場合、
垂直方向のmarginが結合して1つのmarginになるので、
外側のボックスに余白が適用されてしまうのではないでしょうか。
http://hp.vector.co.jp/authors/VA022006/css/box.html#collapsing-margins
http://www.y-adagio.com/public/standards/css1/cssmain.htm#vertical-formatting

[7] mixiユーザー 04月21日 00:13

悔しいので検証してみました（笑

body {
margin:0;
padding:0;
background-color:#ffffff;
}

#Wrap{
margin:0;
padding:10px 0 10px 0;
width:500px;
background-color:#ff0000;
}

#Wrap2{
margin: 0 10px 0 10px;
width:480px;
padding:0;
background-color:#0000ff;
}

#Wrapにheghtを指定していないので、
上下にpaddingを指定してもOKでしょ。

[9] mixiユーザー 04月21日 02:02

背景色をつける目的で margin を設定するのは間違いのようです。
http://hp.vector.co.jp/authors/VA022006/css/box.html#introduction-box

padding なら、設定した背景が反映されるようです。
padding で天地左右広げてしまうのが正攻法だと思います。

Firefox での表示は、2つのボックスの左右幅差が 20px で、その差分が左右にそれぞれ 10px づつ表示されている状態かと思われます。つまり、margin の 10px 分は透過するので下の背景色が表示されている状態かと。
天地に背景色が出ないのも、ボックスの天地サイズがボックス内のコンテンツに依存しており、かつ margin は透過するためではないでしょうか。

IE6 の表示は…謎です。。

Firefox の表示が正しいと思いますが、いかがでしょう。
間違いなどあればご指摘ください。

[10] mixiユーザー 04月21日 03:28

やりたいことと違うかもしれませんが…。
↓
http://www.geocities.jp/chimaera_6/
*********
#width500{width:500px; background-color:#cccccc;}
#Wrap1{margin:0; padding:10px; background-color:#ff0000;}
#Wrap2{margin:0; padding:30px; background-color:#00ff00;}
#Wrap3{margin:0; padding:20px; background-color:#0000ff;}
#naka{margin:0px; width:100%; padding:0; background-color:#ffffff;}

<div id="width500">width500
<div id="Wrap1"><div id="naka">Wrap1</div></div>
<div id="Wrap2"><div id="naka">Wrap2</div></div>
<div id="Wrap3"><div id="naka">Wrap3</div></div>
</div>
*************
外側にも内側のdivにもpx指定するのは後々大変そうなので、
こんな感じにしたいのかなぁ～となんとなく想像で作ってみました。

思い切り的外れだったらすみません^^;

[11] mixiユーザー 04月21日 09:43

>●関西人間○さん
なるほど、ボーダーのwidthで見せるやり方ですね。
実は、background-imageを指定しようと考えています。

>PURESTさん
なるほど。#Wrap1に対する#Wrap2の天地のマージン相殺され、
あのような表示になるんですね。やはりpaddingしか手がな
さそうですね。

>つねさん
何度も有難うございます。やはり、paddingでの指定が無難
そうですね。IE5.X系のバグが怖くて、paddingの指定が
怖かったんです。

>あきさん
そうですね。ブラウザによって、表示や挙動が違うのは
宿命ですよね（笑）。素直にpaddingでいきたいと思います。
IE5.Xがオソロシイ。

>おんな占い
IEはほんと謎ですよね。
#Wrap1のところに、なんらかの要素をいれとけば、上手く
表示されますよね。そういうデザインもありかな・・・。
今、気がつきました。有難うございます。

>Chimaeraさん
そうなんです。まさに後々が大変なんで、Chimaeraさんの
方法でいきたいと思っています。気持ちを察して頂き感謝
っす（笑）。

皆さん、本当にご丁寧にありがとうございました。
今、平行してMTも弄ってる最中で、初っ端でつまずいて
焦ってしましました。ありがとうございました。

[12] mixiユーザー 04月21日 10:27

>Chimaeraさん
本題と関係ないですけど、id="naka"が３つあるのがすごく気になります(^^;

[13] mixiユーザー 04月21日 11:46

きょ、Kyosuke先生…
一つのブロックに対して、一つのサイズ固定したDIVを作るよりも、
一番外側のサイズを決めて大外のDIVを作っちゃう方が
後々ラクなのよー★ってアピールしたかったんです…
出来てないですね（笑

>ベッチさん
あたしもIEでのpaddingでちょっと前に悩んでたので
お役に立てたようでよかったです。

[14] mixiユーザー 04月21日 14:40

>Chimaeraさん
あれ、どこかでお会いしましたっけ（汗

>一つのブロックに対して、一つのサイズ固定したDIVを作るよりも、
>一番外側のサイズを決めて大外のDIVを作っちゃう方が
>後々ラクなのよー★ってアピールしたかったんです…

わかりますよ～。外側で幅指定して囲んであげるのは僕もよくやります。そのほうが何かと楽ですよね。

「ひとつのIDは同じHTMLファイル内で一度しか使用できない」というルールがあるのでid="naka"はclass="naka"にしてあげたほうがよいかなぁと思っただけです。（css側も#naka→.nakaで）

[15] mixiユーザー 04月22日 00:09

>Kyosukeせんせ
っ、そっちのツッコミでしたか（笑
直すのが面倒だったので…^^;
それより、どこでもお会いしてません（汗

ところで先生、質問です！(この際なので宜しくお願いします（笑。

http://www.geocities.jp/chimaera_6/
上のような事をしようと思ってるんですが(CSS初心者です)
現状だと枠の右にどうしても5pxのマージンが出来てしまいますよね。
これをなくしたいのですが、何かいい方法ありますでしょうか？

問題点としてはHTMLを知らない人が更新するかもしれないので
5個目のボックスには違うクラスを…などは出来ないのです。
これでも良いのですが、もし方法があるなら…とちと気になってまして。 (因みに対象ブラウザはWinIE6のみです。)
すみませんが宜しくお願いします<(__)>

[18] mixiユーザー 04月22日 12:14

＞Chimaeraさん

> それより、どこでもお会いしてません（汗
すみません、先生と呼ばれたので1度しか会ってない生徒さんかと思いました。僕のプロフィールみれば講師って書いてありましたね。

> 現状だと枠の右にどうしても5pxのマージンが出来てしまいますよね。
> これをなくしたいのですが、何かいい方法ありますでしょうか？

与一さんのおっしゃるように外ボックスwidth:495px; overflow:hidden;を指定するのがが楽そうです。
根本的にマージンを無くすには辻本珈琲店さんの方法がよいと思います。他の方法は・・・思いついたらまた書きます(^^;

[20] mixiユーザー 04月22日 19:05

皆さんありがとうございます。
CSSにはoverflowなんてのもあるのですね。
おかげさまでやりたいことが出来ました。

floatを指定した中ボックスでは
外ボックスにoverflowがあっても回り込んでしまったので
中と外の間にwidth505のボックスを使う事にしました。
テーブルだとこういう事は出来ないので、CSSにちと感動してます。
楽しいです（笑

>辻本珈琲店さん
わざわざスクリプトまで書いていただきありがとうございました。
今回はCSSで対応出来そうなのでそっちでやってしまいますが、為になりました。
スクリプトでクラスの指定を出来るのは知らなかったので、今後に使えそうです。

皆さんありがとうございました<(__)>

ログインすると、残り6件のコメントが見れるよ