- ベストアンサー
HTML CSSで困っています
- HTMLとCSSで赤い長方形の真ん中に黒い長方形を配置する方法について質問です。
- 現在、HTMLのコードで赤い長方形と黒い長方形を作成しましたが、意図した配置になっていません。
- どのようにすれば赤い長方形の真ん中に黒い長方形を配置できるでしょうか？paddingを使用しましたが、うまくいきませんでした。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
そこにmarginを使うなら、 #soto{ width:320px; height:480px; background-color:#FB0004; padding:1px;/* とpaddingを0以上の値でしたいしないとなりません */ } あるいは、 #soto{ width:320px; height:480px; background-color:#FB0004; border:#FB0004 solid 1px; } この理由は、 ⇒8 ボックスモデル( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html ) ⇒9 視覚整形モデル( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html ) ⇒10 視覚整形モデル詳細( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html ) を参照してください。大変な量なので説明は省きます。 この場合、marginで指定するよりposition:relative;position:absoluteで指定するほうが楽ですよ。
その他の回答 (2)
- t_ohta
- ベストアンサー率38% (5238/13705)
＞ なぜmargin-top margin-leftではダメなのでしょうか？ 隣り合う要素同士、重なり合う要素同士の場合、マージンは相殺されるルールがあります。 今回のボックスの場合はsotoにはコンテンツが無いため、相殺ルールが適用されnakaのマージンが飛び出す形になるので、想定された表示になりませんでした。
お礼
ありがとうございました。
- t_ohta
- ベストアンサー率38% (5238/13705)
#naka{ position:relative; width:160px; height:50px; top:160px; left:80px; background-color:#000000; }
お礼
素早い回答ありがとうございます。
補足
position:relative;うまくいけました。 なぜmargin-top margin-leftではダメなのでしょうか？
お礼
ありがとうございます。いろいろな例をあげてくださり、よく分かりました。