- ベストアンサー
画像と画像の間のスペース
初歩的な質問になりますが宜しくお願いします。 画像１と画像２を縦に隙間なく並べたいのですが、どうしても隙間が出来てしまいます。 CSSを勉強し始めなもので、<div>を入れ子にしすぎてるのか、画像の保存の仕方自体に問題があるのか少し混乱気味で原因がつかめません（汗） 何卒ご教授宜しくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
imgやdivのmarginを0pxにして見てはどうでしょうか。
その他の回答 (5)
- goldfox
- ベストアンサー率49% (123/249)
p要素へのmargin指定も加えましょう。 p.menu1{ margin: 0; }
お礼
出来ました！ありがとうございます！
- kuji1868
- ベストアンサー率53% (7/13)
単純に、各画像タグの後ろに<br>タグをつけるだけではダメでしょうか？
- goldfox
- ベストアンサー率49% (123/249)
あ、「縦に」というのを見落としてました。 <img src="" alt=""><br><img src="" alt=""> divやcssをどう使っているかで、回答も変わりますよ。
お礼
前の回答してくださった方の補足欄にソースを載せました。宜しくお願いします。なんとかCSSをうまく使いたいと思っているのですが・・・。
- goldfox
- ベストアンサー率49% (123/249)
ソースがないので原因も何もアレですが、まあ簡単にいくなら <img src="" alt=""><img src="" alt="">
- shiningsun
- ベストアンサー率50% (7/14)
ソースを提示していただければ回答出来るかもしれません。
お礼
早急な回答ありがとうございます。ソースを載せますので宜しくお願いします。
補足
<!-- html --> <body> <div id="container"> <div id="header"> <div id="header-top"> <a href="index.html" title="手作り雑貨のお店【R】"><img src="image/header-logo.gif" width="169" height="57" alt="【R】手作り雑貨の店"></a> </div> <div id="header-navi"> <a href="index.html" title="ホーム"><img src="image/header-home.jpg" width="56" height="14" alt="home"></a> <a href="#" title="サイトマップ"><img src="image/header-sitemap.jpg" width="94" height="14" alt="sitemap"></a> <a href="#" title="お問い合わせ"><img src="image/header-info.jpg" width="94" height="14" alt="info"></a> </div> </div> <div class="line"><img src="画像１" width="753" height="6" alt=""></div> <p class="menu1"><a href="#"><!-- ここに画像２が入ります --></a></p> </div> </body> <!-- CSS --> body{ text-align: center; margin: 25 auto auto 0; padding: 0; border-style: none; width: 100%; background-color: #FFFFFF; } #container{ text-align: left; margin: 0 auto; border-width: 1px; border-color: #FFCC33; border-style: dashed; width: 753px; } #header{ margin: 0 0 3px; border-bottom-width: 1px; border-bottom-color: #FFCC33; border-bottom-style: dashed; height: 72px; background-color: #FFFFFF; } #header-top{ color: #FF0000; padding: 10px 0 0 24px; float: left; width: 440px; } #header-navi{ text-align: right; padding: 54px 24px 0px 0; float: right; width: 265px; } .line{ text-align: center; vertical-align: bottom; margin: 0; padding: 0; border-style: none; } p.menu1 a{ text-align: left; vertical-align: top; margin: 0; padding: 0; border-width: 0; border-style: none; float: left; height: 36px; width: 114px; background-image: url('image/navi-aisatu.gif'); background-repeat: no-repeat; display: block; } p.menu1 a:hover{ background-image: url('image/header-navi2.gif'); } ---------------------------------------------- ナビの上のラインの画像（画像１）とナビ（画像２）の隙間がどうしても開いてしまいます。無駄にCSSを書きすぎてしまって原因がわかりません。宜しくお願いします。
お礼
画像が多いのでmarginとpaddingは極力"0" にしようとしているのですが・・・。ソースを載せましたので宜しくお願いいたします。