- ベストアンサー
div入れ子、親でmarginを設定すると子のmarginは反映されない?
段組みレイアウトでdivが 入れ子になってています。 外側が <div id=wrap> <div id=main> <div id=form> </div> </div> </div> #wrap{ width: 840px; margin-top: 0px; margin-right: auto; margin-bottom: 15px; margin-left: auto; } #main { width: 582px; float: right; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10; } #form { width: 562px; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 20; } としてあります。 id=formのmargin-left :20; だけがブラウザで反映されず、 flort:right;で右に寄せて左に20pxあけました。 id=mainもflort:right;で右に寄っているだけだったようです。 divを入れ子に使う場合、 親でmarginを設定したら、子のmarginは反映されないのでしょうか?
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
margin-left: 20; ではなくて、 margin-left: 20px; と書いたら、反映しませんか?
その他の回答 (3)
IEの仕様が微妙なので親要素のボックスに向けて(?)の内側からのmarginよりもpaddingで余白を取る方がいいと思います。 場合によっては親要素にmarginが継承されてしまう場合もあるので・・・
お礼
ありがとうございました。確かにそのようです。 IEで内側のmarginがとれないのがpaddingを使うことでうまくゆきました。 他の方に指摘頂いた、pxの記入漏れとあいまって混乱していましたが、 スッキリしました。
- coopy72v
- ベストアンサー率12% (1/8)
私の環境ではですが mainのfloat:right;をはずせば普通にマージン取れていました。 下の方も書いていらっしゃいますが、マージンをあけるときはpx等、 単位は書いたほうがよいかと思います mainを右周り込みにするということは、左の20pxの隙間に何かを入れたいのでしょうか? 右のスペースに何かを回りこませるならば、float:left; かな? ついでですが、上下左右すべて指定するならば margin:(top) (right) (bottom) (left);と並べて書けばできますよ^^ 回答に勘違いがあったら 申し訳ないです;
お礼
ありがとうございます。 marginがとれました。これでfloat:left;でもOKでした^^
通常は反映されるはずです。 ですがNo.1の方もいっている通り、『px』の文字が抜けてると表示できないことがあるようです。 あと、id=○○じゃなくてid="○○"にした方が良いですよ。
お礼
こまかい見落としで、苦労してるだけなんですね。 ブラウザによって大丈夫だったりするので、ブラウザの問題にしてしまいがちですが自分が悪いんですね。 ご指摘ありがとうございます。
お礼
反映しました。見落としでお手数をかけてすみませんでした。 このpxの見落としと、IEのmarginの問題が絡んで、混乱しきっていました。 ありがとうございます。