初歩的な質問になりますが宜しくお願いします。画像１と画像２を縦に隙間なく並べたいのですが、どうしても隙間が出来てしまいます。 CSSを勉強し始めなもので、を入れ子にしすぎてるのか、画像の保存の仕方自体に問題があるのか少し混乱気味で原因がつかめません（汗）何卒ご教授宜しくお願いします。

単純に、各画像タグの後ろにタグをつけるだけではダメでしょうか？

あ、「縦に」というのを見落としてました。 divやcssをどう使っているかで、回答も変わりますよ。

画像と画像の間のスペース

解決済

質問者：ueueueue
質問日時：2007/07/31 18:54
回答数：6件

初歩的な質問になりますが宜しくお願いします。

画像１と画像２を縦に隙間なく並べたいのですが、どうしても隙間が出来てしまいます。
CSSを勉強し始めなもので、<div>を入れ子にしすぎてるのか、画像の保存の仕方自体に問題があるのか少し混乱気味で原因がつかめません（汗）

何卒ご教授宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： noname#56851
回答日時：2007/07/31 20:23

imgやdivのmarginを0pxにして見てはどうでしょうか。

- 0
- 件

通報する

この回答へのお礼

画像が多いのでmarginとpaddingは極力"0" にしようとしているのですが・・・。ソースを載せましたので宜しくお願いいたします。

通報する

お礼日時：2007/08/01 11:14

No.6

回答者： goldfox
回答日時：2007/08/01 17:54

p要素へのmargin指定も加えましょう。

p.menu1{
margin: 0;
}

- 0
- 件

通報する

この回答へのお礼

出来ました！ありがとうございます！

通報する

お礼日時：2007/08/02 07:18

No.5

回答者： kuji1868
回答日時：2007/08/01 16:27

単純に、各画像タグの後ろに<br>タグをつけるだけではダメでしょうか？

- 0
- 件

通報する

No.3

回答者： goldfox
回答日時：2007/07/31 19:22

あ、「縦に」というのを見落としてました。

<img src="" alt=""><br><img
src="" alt="">
divやcssをどう使っているかで、回答も変わりますよ。

- 0
- 件

通報する

この回答へのお礼

前の回答してくださった方の補足欄にソースを載せました。宜しくお願いします。なんとかCSSをうまく使いたいと思っているのですが・・・。

通報する

お礼日時：2007/08/01 11:11

No.2

回答者： goldfox
回答日時：2007/07/31 19:04

ソースがないので原因も何もアレですが、まあ簡単にいくなら

- 0
- 件

通報する

No.1

回答者： shiningsun
回答日時：2007/07/31 19:03

ソースを提示していただければ回答出来るかもしれません。

この回答への補足

<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>



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を書きすぎてしまって原因がわかりません。宜しくお願いします。