- ベストアンサー
<ul>タグの後の<div>タグのmarginについて教えてください
- ホームページの<ul>タグの後にある<div>タグのmarginについて教えてください。
- <ul>タグの使い方について、<div>タグのmarginはどの要素に対して適用されるのか疑問です。
- <ul>タグの存在を無視して、<div>タグのmarginは最初の要素に対して適用されるのでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ああ、、これは失礼しました。 ulやliタグがfloatで通常のタグの流れから浮かされているため、 .fontもfloatで浮かせないとmargin-topは効きません。 clearは自動調整（min-margin-topのようなものです※そんなスタイルは実際ありませんが…） 効いているIEのほうが間違いです。 解決する方法は2つあります。 (1)ul.menu-bのmargin-bottomで余白を指定する。.fontはclearでこのmargin-bottom分も自動調整されます。 ul.menu-b{ margin:0 0px 100px 0px; } (2)あえて.fontをfloat:leftして、同じ階層に持っていったうえでmargin-topを効かせる。 .font{ clear:both; float:left; width:100%; margin:10px 0px 100px 0px; } ただし、(2)の場合はその後の要素がまた同じ問題を抱えますが。 参考URL http://mb.blog7.fc2.com/blog-entry-62.html http://www.geocities.jp/multi_column/float/06.html
その他の回答 (2)
- metametamu
- ベストアンサー率51% (153/295)
＞margin要素は1番上の<img src="image/123.gif">から考えた数値になるのでしょうか？ 正確にはimgとdivの間に高さ0pxのul要素が2つあることになるので、2つめのul要素から余白を取っていることになります。 ためににどちらでもいいのでul要素に高さを指定してみてください。divの開始位置がずれるはずです。 floatを指定された要素は通常のフローから外されてしまいます。 なので今回の場合、ul要素の中に通常フローで高さを持つ子要素が無いため、ulの高さが0になってしまいます。 なので見かけ上img要素から余白を取っているように見えるという感じでしょうか。
お礼
回答ありがとうございます。 「要素の高さがない」ということがあるということを、今回初めて知りました。 書いて頂いた回答を参考に、試しに色々と指定を変えて実験してみて、すごく勉強になりました。 ありがとうございました！
- kuzumiHK
- ベストアンサー率72% (132/183)
確認しているブラウザやDOCTYPE宣言の有無によって、そのような状況になることも十分考えられますが、 下記のようにすればどのようなブラウザでもulタグの後にdivタグのmarginが効くようになると思います。 (1)DOCTYPE宣言を入れます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> (2)ulにclearとfloatとwidthを追加します。 ul.menu-a{ clear:both; float:left; width:200px; margin:0; padding:0; } ※floatを入れる理由はliタグのみfloatで浮かせるとulタグ内にレイアウト上中身がないことになり、高さ0px扱いになるからです。 liタグが浮いて、中身なしのulタグの次にdivタグがあることになっている可能性があります。 ※clear:bothを入れているのは、ulが2段になっているため、floatの影響を回避するためです。 (3)安定させるためliタグにもwidthを追加します。 ul.menu-a li { float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; list-style:none; } ※IE6のバグにも対応するならdisplay:inline;を追加します。子要素のaタグをブロック要素にしているので問題ないはずです。 (4)divタグにはclear:bothを追加します。 div.font{ clear:both; color:#000000; margin : 100px 0px 100px 0px; border: 1px ; } ※floatの影響を回避するためです。 これでどんなブラウザでもmarginはulの下辺からの数値になるはずです。 いかがでしょうか。
お礼
素早い回答ありがとうございます！ 丁寧な解説までつけていただいて、とても勉強になります。 書いて頂いた通りに直してみた所、IEではばっちり<ul>の下からの数値になったのですが Firefoxでは変わらず<img>からの数値になってしまいます。 IEとFirefoxの違いから来る問題かと思い調べているのですが、どうにも解決策が見つかりません。 重ねての質問で申し訳ないのですが、何かお心当たりがありましたらよろしくお願いします。 また、初めの質問の時点で書いておくべきでした。すいません。 制作時点ではwin vista、IE7とFirefoxで3.6.8で確認しています。
お礼
再びの回答ありがとうございます！ (1)の方法で、無事に解決することができました。 なんとなく使っていたfloatやclearがこんなにも大事だったとは思いもよりませんでした…。 書いて頂いた解説や、参考URLもとても勉強になりました。 改めて、ありがとうございました。