• ベストアンサー

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は反映されないのでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

margin-left: 20; ではなくて、 margin-left: 20px; と書いたら、反映しませんか?

takeetakee
質問者

お礼

反映しました。見落としでお手数をかけてすみませんでした。 このpxの見落としと、IEのmarginの問題が絡んで、混乱しきっていました。 ありがとうございます。

その他の回答 (3)

noname#83877
noname#83877
回答No.4

IEの仕様が微妙なので親要素のボックスに向けて(?)の内側からのmarginよりもpaddingで余白を取る方がいいと思います。 場合によっては親要素にmarginが継承されてしまう場合もあるので・・・

takeetakee
質問者

お礼

ありがとうございました。確かにそのようです。 IEで内側のmarginがとれないのがpaddingを使うことでうまくゆきました。 他の方に指摘頂いた、pxの記入漏れとあいまって混乱していましたが、 スッキリしました。

  • coopy72v
  • ベストアンサー率12% (1/8)
回答No.3

私の環境ではですが mainのfloat:right;をはずせば普通にマージン取れていました。 下の方も書いていらっしゃいますが、マージンをあけるときはpx等、 単位は書いたほうがよいかと思います mainを右周り込みにするということは、左の20pxの隙間に何かを入れたいのでしょうか? 右のスペースに何かを回りこませるならば、float:left; かな? ついでですが、上下左右すべて指定するならば margin:(top) (right) (bottom) (left);と並べて書けばできますよ^^ 回答に勘違いがあったら 申し訳ないです;

takeetakee
質問者

お礼

ありがとうございます。 marginがとれました。これでfloat:left;でもOKでした^^

noname#119508
noname#119508
回答No.2

通常は反映されるはずです。 ですがNo.1の方もいっている通り、『px』の文字が抜けてると表示できないことがあるようです。 あと、id=○○じゃなくてid="○○"にした方が良いですよ。

takeetakee
質問者

お礼

こまかい見落としで、苦労してるだけなんですね。 ブラウザによって大丈夫だったりするので、ブラウザの問題にしてしまいがちですが自分が悪いんですね。 ご指摘ありがとうございます。

関連するQ&A