- ベストアンサー
スタイルシートの指定にもかかわらず、なぜ画像に変なスペースが入るのでしょうか？
- スタイルシートでmargin:0; padding:0;と指定しているにもかかわらず、画像に変なスペースが入る場合があります。
- 画像に変なスペースが入る原因は、画像自体に設定されている余白やマージンが影響している可能性があります。
- また、スタイルシート内の他の要素によって画像に余白やマージンが生じている場合もあります。
- unagitokyo
- お礼率33% (2/6)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 半角スペースを隠すために、コメントアウトしたんですけど、ダメみたいで・・・ 「半角スペースを隠すために、コメントアウトした」のはどこの部分の事ですか？私がANo.1で「ここでしょうか？」とおたずねした部分は、補足のソースを見てもそのまま（半角スペースがコメントアウトされていない）になっていますので、そもそも「へんなスペース」が入っている（いた）のは、「そこ」の事ではなかったのですね？ > 最初のtableだと、img{vertical-align:top;}を入れたら直ったんですけどね …と仰っているところを見ると、「へんなスペース」が入っていたのは<td>内の事で、各メニュー画像が「上下に隙間無くぴったりくっつかなかった」という事だったのでしょうか？ 検証する為には、質問者様の抱えている状況を正確に把握する必要がありますので、以下の点を明確にして頂きたく思います。 ・今度のソースで、「へんなスペース」が入っているのはどの部分ですか？具体的に示して下さい。 ・「へんなスペース」が入って見えるのを確認したのはどの環境（ブラウザの種類とヴァージョン）においてですか？ ・memu_back1.gifの縦横サイズを教えて下さい。 ・実際に使用されているCSSに提供された部分以外の設定があったり、問題のHTMLファイルから別のCSSを併せて参照したりはしていませんね？
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
> なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ 「へんなスペースが入」るのは、具体的にどの部分ですか？もしかして： <div id="flash-a">～</div>と<div id="main-1">～</div> の上下の間にですか？もしそうであれば、それぞれの<div>と子要素である<img>の間に、半角スペースが入っている為かと思われます。 試しに質問者様ご提供のソースをそっくりコピーして再現してみましたところ、IE6/7上では<div id="flash-a">～</div>と<div id="main-1">～</div>の間に1～2pxほどの隙間ができる様ですので、半角スペースを削除するとぴったりくっつきました。 ※FirefoxやOpera等では、元より隙間はできていません。 ちなみに、現状のCSSだと、IE以外の環境ではコンテンツ全体が画面に対して水平方向にセンタリングしませんが、それはご了承の上の事でしょうか？ また、子要素の#sidememuと#mainがfloatしている為、親要素の#wapperが高さを失っていますので、それに対する対策を施しておかないとIE以外の環境だと何かと不都合が出てきますが…
補足
有難うございます。あのですね、 やりなおしまして、 ソースは、 <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" alt=""></div> <div id="sidemenu"><!-- --><ul><!-- --><li><a href="#">仲介業者様 </a></li><!-- --><li><a href="#">空室一覧表</a></li><!-- --><li><a href="#">物件情報 </a</li><!-- --><li><a href="#">ご契約の流れ </a></li><!-- --><li><a href="#">申込書ダウンロード</a></li><!-- --><li><a href="#">ご入居者様</a></li><!-- --><li><a href="#">お部屋の解約について</a></li><!-- --><li><a href="#">お問い合せ</a></li><!-- --><li><a href="#">会社概要</a></li><!-- --><li><a href="#">経営理念</a></li><!-- --><li><a href="#">事業内容</a></li><!-- --></ul><!-- --></div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> <div id="footer"> </div> </div> </body> CSSは、 *{ padding:0; margin:0; } img{ padding:0; margin:0; vertical-align:top; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820px; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidemenu{ margin-top:20px; float:left; } #sidemenu ul{ list-style:none; background:#FF0000; } #sidemenu li{ font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:10px; background-image:url(../img/memu_back1.gif) ; background-position:-113px 0px; width:103px; height:18px; text-align:left; padding-left:10px; padding-top:10px; overflow:hidden; margin:0; } #sidemenu li a{ color:#FFFFFF; text-decoration:none; } #main{ margin-left:10px; margin-top:20px; float:right; width:650px; } #footer{ clear:both; } にしたんですが、やっぱり、ダメなんです。。。半角スペースを隠すために、コメントアウトしたんですけど、ダメみたいで・・・ wapperの件は、clear:bothを入れたので、大丈夫になったんですけど。。。どうしてでしょう？？ ちなみに、最初のtableだと、img{vertical-align:top;}を入れたら直ったんですけどね・・・すみません。アドバイス下さい。よろしくお願いします。
お礼
お返事ありがとうございます。 firefoxでは、大丈夫だったんですけど、IE6でliの所で空きができてしまってたんです。結局ですね、liに、floatをかけ、ulと親divに、widthを指定した所、直りました。アドバイス有難うございました！