CSSスタイルシートの設定について教えてください。
IE7では、意図したように表示されるのですが、Firefox 3.6.13 では
意図したように表示されません。
一つのボックス内に、もう一つのボックスを、余白付きで表示させたい
だけなのですが、上手く行きません。
<div style="background-color:#FF0000;width:300px;height:150px;text-align:center">
<div style="background-color:#FFFF00;width:200px;height:100px;margin-top:20px"></div>
</div>
（わかりやすいように、CSSは直接書き込みました。CSS初心者です。）
一般的なブラウザ間で、同じように表示されるようにしたいのですが、
どのようにCSSを書き込めば良いでしょうか？
わかりやすくするために、説明画像を添付させていただきます。
教えていただけるととても助かります。
よろしくお願いします。
みんなの回答
-
JULY
満足27pt
まず、margin-top が効いていないのは、「マージンの相殺」によるものです。
入れ子関係にある２つの div の間で、縦方向の相殺が行われ、上記ページの「ボックス内にボックスがある場合のマージンの相殺」に該当しています。
これを回避するには、position を relative にして、top で縦位置を指定してやります。
position - 配置方法を指定する - CSSリファレンス：ITpro
次に、横のセンタリングですが、これは、text-align が「ブロック要素の内容の配置位置」に作用するもので、ブロックそのものがセンタリングされる訳ではありません。
ブロック自体をセンタリングするには、内側の div で margin-left と margin-right を auto に設定します。
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
これだと、IE と Firefox（というか IE 以外）で CSS を分けなきゃいけないように思われますが、少なくとも IE8 以降であれば、標準互換モードで表示されるようにすれば、同じ CSS で行けます。
例えば、下記のようにすると、Firefox と IE8 で同じように表示されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body> <div style="background-color:#FF0000;width:300px;height:150px"> <div style="position:relative;background-color:#FFFF00;width:200px;height:100px;top:20px;margin-left:auto;margin-right:auto"></div> </div> </body> </html>
-
peach555
-
- その他の回答を読む
peach555
この質問へのコメント
質問の情報
- 登録日時
- 2010-12-21 14:15:59
- 終了日時
- 2010-12-21 17:37:07
- 回答条件
- 1人2回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
木の太い幹、木の太い根、を掘り出しました。このまま捨てるのは大変です。重いです。切るのも硬いです。干…
匿名質問者
1
-
今行きがかり上で中小企業を相手に民事訴訟の原告と被告で2件の裁判を抱えています。しかし何も深刻さはな…
asnaro_71
2
-
海外の習慣、民族的なことに詳しい方に質問です。 「玄界灘に生きた人々」という本で、「ダイコン官との旅…匿名質問者
-
【ナルコ】 私は医療に関して（当事者ではあるものの）素人です。 友人Aは「ナルコレプシー」的に、話して…
SE**.M1
-
外国から、王族が来ると、その人のパスポートは、ふつうのパスポートとは違う？ 外交官パスポートみたいな…匿名質問者
せっかくなので、コメントに。
内側の margin-top が効いていないように見えるのは、margin の相殺のせいです。
「css margin 相殺」でググってみるといろいろと例が見つかると思います。
対策としては、内容が空の場合に起きるので、空にならないよう（普通に文字などいれる）にすればＯＫ．
ごまかしでよければ、相殺されない padding を使う手もあり。
ブロック要素のセンタリングは、こちらの記述が詳しいです。
http://www.mozilla.gr.jp/standards/webtips0004.html
で、こんな感じ。
<div style="background-color:#FF0000;width:300px;height:150px;text-align:center;padding-top: 1px;">
<div style="background-color:#FFFF00;width:200px;height:100px;margin: 19px auto 0;text-align:left;">