- ベストアンサー
FFにおけるDIVタグ間の隙間について
たびたびお世話になります。 自分なりにあちこち検索したのですが、解決できるものが見つかりませんでしたので、質問させていただきます。 今回初めてCSSを使ってHPを作成しているのですが、部分的に<DIV>～</DIV>と<DIV>～</DIV>の間に10px程の隙間が発生します。 IE系のブラウザでは特に問題ないのですが、Mozila系で再現されるようです。 どのようなタグを挿入、あるいは削除すれば解決できるでしょうか？ 以下、該当部のタグになります。 【html】 <body> <div id="header"> <a href="http://****.jp/"> <img src="../img/images/images/title.jpg"width="207"height="33"> </a> </div> <div id="topphot1"> <div id="topphot2"> <!-- TOP画像入れ替える時はここのファイルを変更。横711px縦150pxのもののみ --> <img src="../img/topphoto.jpg" width="711px" height="150px" /> <!-- ↑↑↑ --> </div> <div id="q_menu"> <ul class="q_menu"> <li><a href="#"><img src="../img/icon_m.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_s.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_r.gif" width="23" heigh="23" /></a></li> </ul> </div> </div> <div id="m_menu"> <ul class="m_menu_ro"> <li><a href="#" class="bbs"></a></li> <li><a href="#" class="battle"></a></li> <li><a href="#" class="event"></a></li> <li><a href="#" class="hunt"></a></li> </ul> </div> 【css】 #header{ padding:0 auto 0 auto; margin:0 auto 0 auto; background-color:#7fd137; color:#ffffff; width:800px; height:33px; } #topphot1{ margin:0 auto 0 auto; padding:0 auto 0 auto; position:relative; background-color:#edf2e9; background-image:url(../img/images/HP_03.jpg); background-repeat:no-repeat; background-position:center; color:#696969; width:800px; height:220px; text-align:center; } #topphot2{ margin-top:8px; padding-top:8px; margin-left:auto; margin-right:auto; position:relative; color:#696969; width:711px; height:150px; text-align:center; } #q_menu{ position:absolute; left:50px; bottom:10px; } ul.q_menu{ width:69px; height:23px; margin:0px; padding:0px; } ul.q_menu li{ float:left; } 不慣れなもので、タグ自体がちょっと滅茶苦茶なカンジもするのですが…。 aタグ周囲の改行の削除、vertical-alignをbottomに設定するなどでは解消できませんでした。 よろしくお願いします。
- BluegrayChocolat
- お礼率65% (310/473)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>>> <div></div> に10px程の隙間が発生 どの div の間でしょうか？ このソースだと、body直下に３つ、ネストされているdivが２つあります。 このソースの、#header と #topphot1 の間をおっしゃっておられるのでしたら、それは #topphot2{ margin-top: 8px;} のせいです。div#topphot1に ネストしたdiv#topphot2 の画像の上マージンを取りたいのでしたら、padding-top: 16px; にして、margin-top は0pxにしてください。 これは、 "marginは、重なる場合に相殺される" という事なのです。 例えば、このスタイルシートに、 div#header{margin-bottom:10px;} div#topphot1{margin-top:20px;} と指定した場合、#header と #topphot1 の間は 10px+20px=30px ではなく、"20px"になります。 このソースで言うと、 div#header {margin:0px auto;} div#topphot1{margin:0px auto;} div#topphot2{margin-top:8px;padding-top:8px;} #header と #topphot1の間（上下）にマージンはないので、上下はくっついて（重なって）います。 そして、#topphot1 と #topphot2の間に8px marginが入る。#header と #toppho1はくっついていますから、結果として、見た目は#header と #topphot2 の間が空いていることになります。解りますか？ これが、ブラウザの解釈の違い（バグとも言う）です。marginは、「中身がある要素まで、どこまでも相殺」されるのです。 そこから、#topphot2には padding-top:8px;指定がありますので、それは確保されています。 問題は、margin, border, width, float,などに関して、IE5.x, IE6(IE7も、らしい）のバグもありますし、ブラウザ毎、また、DOCTYPEスイッチで （CSS準拠かどうかは別にしても）挙動が異なる部分がある、ということなのです。コーディングの際に一番面倒な部分です。 わかりにくいかもしれません。図面付きの解説サイトなどもありますので、検索なさるとよろしいかと思います。
その他の回答 (1)
- kazumero
- ベストアンサー率40% (20/49)
調べてみたら、 #topphot2{ margin-top:8px; のmargin-topが原因でした。 #topphot2{ margin-top:0px; で解決しました。
お礼
回答ありがとうございます。 恐らくその辺りが原因なのだろうと思ったのですが、0pxにしてしまうと目的のマージンが取れなくなってしまうので、 どうしたらいいものかと悩んでいました。。。
お礼
回答ありがとうございました！ 説明不足で申し訳ありません。ご指摘の通りの場所ですね。 お教えいただいたとおりに組みなおしたところ、解消できました。 バグについては色々聞き及んではいるのですが、自分で解決できないのが苦しいところです…。 とても助かりました。ありがとうございます。