• ベストアンサー

画像の縦サイズが小さいと隙間が・・・

縦のサイズが小さい画像を縦に並べると、隙間ができてしまいます（IE6）。 隙間を空けずに、縦方向にぴったりとくっつけたいので困っています。 ネットで調べて色々な方法で試してみましたが、解決しません。 IE6ではあきらめるしかないのでしょうか。 どなたか解決策があれば知恵をかしてください。よろしくおねがいします。 （例） <div style="width:100px; background-color:red;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> </div>

  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
  • 15mm
  • ベストアンサー率65% (65/100)
回答No.2

ＩＥ７では確認しました。 <img>のstyleを display:block; のみにしてみてください。（borderに意味があるなら残しておいて） <img>をブロックレベル要素として表示させることで、一行の高さを気にすることなくくっつけられます。

yukky148jp
質問者

お礼

回答ありがとうございました！ 画像をブロックレベル要素にできるんですね。 おかげで隙間を消す事ができ、解決しました。 とても勉強になりました、ありがとうございます！

その他の回答 (1)

  • pai3_14
  • ベストアンサー率56% (319/566)
回答No.1

最初の<div style=" >に font-size:0px　等を追加してみては？ （line-hightでもいいかも？) IE6等では、画像も1ラインの要素として扱っているようで <IMG>タグの後ろに <BR>タグを置かないで文字を置くと 文字が画像につながってしまいます。 と言うことは、画像も最小1ライン分の高さをとっていると 考えられますから、画像が1ライン分より低いときは ラインの高さを小さくする必要があるのではないでしょうか？

yukky148jp
質問者

お礼

回答ありがとうございました！ line-hightは自分でも試してみてダメだったんですが、 font-size:0pxにすることで無事解決しました。 解決方法があってほっとしました。 質問してよかったです。どうもありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • Firefoxでの画像の縦の隙間をなくしたい

    現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }

    • ベストアンサー
    • CSS
  • 画像を縦に並べたら隙間ができることについて

    画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像１" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像２" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • IE6で外部リンク画像の下に隙間

    IETesterの6で確認していたところ、 外部スタイルシートの画像の下に隙間（10px程）ができてしまいます。 Firefox、IE8、IE7ではこの現象は見られませんでした。 以下記述となります。 /* HTML */ <div id="bg_top01"></div> <div id="contents_box01">あああ</div> <div id="bg_btm01"></div> /* CSS */ #bg_top01 { background:url(../img/bg_top.gif) no-repeat; width:760px; height:6px; } #contents_box01 { background-color:#2F4473; width:716px; padding:0 22px; } #bg_btm01 { background:url(../img/bg_btm.gif) no-repeat; width:760px; height:6px; } 隙間ができるのはbg_top01の下だけです。 他のサイトで「vertical-align: bottom」を入れると直るあったので、入れてみたんですが変わりませんでした。 隙間をなくすのに他に方法がありますでしょうか？ ご助言をお願いいたします。

    • ベストアンサー
    • HTML
  • ホームページのメニューと写真の間に、すき間があく。

    はじめまして。 現在、webデザインの勉強のために架空のサイトを作っています。 そこで、 写真にあるようにメニューバーと その下の写真との間にすき間ができてしまいます。 IE８では、問題ありません。 firefox5,choromeでトラブルがあります。 調べて メニューと、下の写真のmarginとpaddingを0にしたり、 vertical-alignを指定してみたりしたのですが、 変わりませんでした。 下記にそのhtmlとcssを載せていますので、 ご指摘お願いします。 ※dream weaver cs5で作りました。 =========================================== html <div id="menu"> <ul> <li><img src="image/btn_01_s1.jpg" width="160" height="50" alt="ホーム" /></li> <li><img src="image/btn_02_s1.jpg" width="160" height="50" alt="事業内容" /></li> <li><img src="image/btn_03_s1.jpg" width="160" height="50" alt="実績と強み" /></li> <li><img src="image/btn_04_s1.jpg" width="160" height="50" alt="資料請求" /></li> <li><img src="image/btn_05_s1.jpg" width="160" height="50" alt="会社概要" /></a></li> </ul> <!-- / #menu --></div> <div id="photo"> <p><img src="image/catch_s1.jpg" width="800" height="280" /></p> <!-- / #photo --></div> ============================================= css /*メニューバー*/ #menu { width: 800px; height: 50px; margin: 0px; padding: 0px; } #menu ul li { float: left; border-style: none; vertical-align: text-bottom; } /*写真*/ #photo { clear: both; height: 280px; width: 800px; margin: 0px; padding: 0px; }

    • ベストアンサー
    • HTML
  • CSSの左横に隙間ができてしまいます。

    画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->

    • ベストアンサー
    • CSS
  • リストタグを用いた縦メニューで画像に隙間ができます（IE6）

    いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }

    • ベストアンサー
    • HTML
  • CSSでfloat指定した画像に隙間

    floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left;　←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>

    • ベストアンサー
    • HTML
  • コンテンツの配置について

    Yahoo!のようにコンテンツ全体を中央によせ、さらに、 それぞれのボックスの表示位置を縦横で指定したいのですが 以下のようなソースではうまくいきません。 対処方法をご教示下さい。 よろしくお願いします。 <STYLE TYPE="text/css"> <!-- #main{ position:relative; top:10px; text-align:center; width:100%; } #contentsA{ text-align:center; width:800px; } #contentsB{ position:relative; hight:200px; } --> </STYLE> <TITLE></TITLE> </HEAD> <BODY> <DIV id="main"> <DIV id="contentsA"> <DIV id="contentsB"> <IMG src="image3.gif" border="0" width="50" height="50"> <IMG src="image2.gif" border="0" width="50" height="50"> <IMG src="image1.gif" border="0" width="50" height="50"> </DIV> </DIV> </DIV> </BODY>

    • ベストアンサー
    • HTML
  • 画像をcssでレイアウトしたいです

    以下のボックスにあるイメージをボックスの左上を基準に2x2の形に並べたいです。その際にcssのpositionを使用してrelativeを指定して定義したのですがうまくいきません。正しい指定の方法を教えてください。 <div id="bottom_right"> <img src="images/image1.gif" width="176" height="57" /> <img src="images/image2.gif" width="176" height="57" /> <img src="images/image3.gif" width="176" height="57" /> <img src="images/image4.gif" width="176" height="57" /> </div>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する