- 締切済み
cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
「マージンの相殺」が生じる問題ですね。詳細は下記などをご覧になってみて下さい。 【参考】http://adp.daa.jp/archives/000574.html 過去、同様の質問にお答えさせて頂きました。よろしければそちらも参考にしてみて下さい。 http://oshiete1.goo.ne.jp/qa4948059.html そちらの答えと重複しますが、親要素のボックスにpadding-topを指定する事が可能なレイアウトであれば、一番手っ取り早いです。 今回のサンプルであれば、#greenの方にpadding-top: 50px;を指定して、#redのmargin-topは0にする、といったやり方です。 ただし、ボックスにheightが併用されているので、標準準拠モードの場合はheightの値からpadding-topの値を差し引いてやる必要があります。 サンプルの http://pajt.paq.jp/t/a/p/test2.html の実際のソースを拝見すると、DOCTYPEが全く指定されていませんが、本来はどの様なDOCTYPEを宣言していますか？それによってブラウザによってはDOCTYPEスイッチが切り替わって、後方互換モードになってしまう為、heightの値にpadding-topの値が含まれてしまい、計算方法が違ってきますので… 【参考】http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=3 【参考】http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=0
