imgの下に余白が出来てしまう

質問

1週間位悩んでいますが、わかりません。
どなたか助けてください。

下のようなHTMLを書いています。

<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="img/head.bmp" border="0"></td></tr>
</table>

で、画像の上下左右に余白が出来ると困るのですが、
下側だけに3～4dot程度の余白が出来てしまいます。
ちなみに、画像のサイズは762x63dotです。

試しに
<tr height="90"><th valign="bottom">
<img border="1" ...
とやると、画像がテーブルの中で下の方に配置されますが、やっぱり下に3～4dot程度の余白ができます。
また、余白はimgのborderの外側にあります。

どうか、宜しくお願いいたします。

回答No.8

steel_gray · ベストアンサー

> Microsoftのページで、この辺のバグを解説しているページがあるということでしょうか！？
Microsoftがバグとして情報を公開しているかどうかはわかりませんが、仕様(参考URL)と異なる動作をしているのでバグということになります。

> また、「bmpはインターネットでは駄目」の件についてですが、”駄目”なわけではなくて、”圧縮形式の方が通信サイズが小さいから良い”ということでしょうか？
インターネットでは駄目ということではありませんが、元々がWindowsでだけ扱えるローカルな形式であったので、インターネット上で使うには相応しくないでしょう。
WindowsではIE以外、（最新ならば）他のブラウザでも表示できるようになってきましたが、Macとかでは表示できないケースがあるんじゃないでしょうか？（実態はよくしりませんが）
そもそもbmp形式を選ぶ理由がないので他で使えるかどうかとか、bmpそのものの解説とかもあまり見かけません。
bmpしか使えないような画像エディタでは満足な編集が行えないため、使いやすいツールに乗り換えていきますので、bmpのままの方が楽という状況もあまりないのです。

参考URL：

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#h-B.3.1

回答No.11

t140

<IMG src=""><BR clear="all">

ごく基本的なタグです。

お礼

冷たい回答ありがとうございました！
（冗談です）

これでも回避できるんですね。
でもこれって、このために用意されているものではないですよね？

回答No.10

noname#79209

> gifだと色数が限られていて画像が荒くなってしまうので。

ローカルパレットを使うことで荒くなるのを避けられませんか？

お礼

回答ありがとうございます！

勿論、避けられると思います。。

今回は（未経験に近いのに）２週間で３０ページ位あるサイトを作らなければならなくなり、実際作ってみると、デザインも全く考え付かなくてちょっと焦ってきて、気付いたらメニュー表示を共通化するためにJavaScriptとか結構書く必要があったりで、、

そんな中でimgの下の余白が消えないことを調査していたら何日も経ってしまって・・・。

で、かなりパニックに陥っていたので、
どうせ動くなら取敢えずはbmpでいいや、と思っていたのですが、実際出来てみるとやっぱりbmpは重いですね。。

画像は、完成してから差し替えようと思います。
ありがとうございました。

回答No.9

funi2

昔, 似たような苦労をしたことがあります。

そのときは, imgタグにvertical-alignをつけることで解決しました。

<img src="img/head.bmp" border="0" style="vertical-align: bottom">

違ってたら, すみません。

お礼

回答ありがとうございます！

試してみましたが、この方法でも解決するんですね。

それにしても、よくこんなのに気付きましたね・・・。
すごい。

回答No.7

steel_gray

#4-3回目。

> gifだと色数が限られていて画像が荒くなってしまうので。

ケースバイケースなので2回目の回答の時には実際の画像をみてませんでした。（荒くなるというコメントを読んで写真を取り込んだような画像かと思っていました）

で、見たみましたが、このサンプルの画像に限って言えば、gifへの変換方法に問題があるようです。この手の自作画像ならば元絵のイメージを損なわずにgif形式にすることは可能です。

使用しているツールの使い方やツールそのものの選択を再考してみてはいかがでしょうか。

参考URLもご覧になってみてください。

参考URL：

http://www.tohoho-web.com/wwwimage.htm,http://www.geocities.co.jp/SiliconValley-Cupertino/1623/#gazo

お礼

色々とありがとうございました。

そうですねー。
使っているツールはFireWorksなのでツールは悪く無いと思うのですが、今まで使った事が無いのに昨日期限で仕上げなければならなかったので時間がなくて・・・。

でも、実際に大分出来てきたのですが、想像以上にbmpでは重いので完成したら、GIFかJPEGに切り替えようと思います。

ありがとうございました。

回答No.6

steel_gray

#4です。
タグの前後の直前直後の改行については無視されなければいけないのですが、IEはこれを拾ってしまうというバグがあります。
なので、改行を入れないか、改行する場所を調整するなどの対策が必要になります。
例1)
～><img（改行）
src="～"
例2)
～><!--（改行）
--><img src="～"

bmp形式は他の形式に比べて唯一無圧縮の形式ですのでファイルサイズが大きいという欠点があります。
いかに通信回線が高速化しようとも、ファイルサイズは小さいに越した事はありませんのでgifの色数が問題となるならばjpegやpng形式にするとよいかと思います。

補足

さらなる回答、ありがとうございました！

IEのバグだったんですか！？
うわーって、感じですね。
１週間以上、ずっと悩んでいたのに・・。

Microsoftのページで、この辺のバグを解説しているページがあるということでしょうか！？
自分でも詳細が見てみたいので、ご存知であれば教えて頂けると嬉しいです。

また、「bmpはインターネットでは駄目」の件についてですが、”駄目”なわけではなくて、”圧縮形式の方が通信サイズが小さいから良い”ということでしょうか？

なんだか、皆さんは「bmpはインターネットで対応してない」みたいな雰囲気の回答だったので、根本的に使ってはいけないのかなというふうに思ったのですが、steelgrayさんの説明を読むと、bmpよりもjpegやpng形式の方がおすすめ（bmpがインターネットで使っては駄目だとは言って無い）程度に感じたので。。

初心者なもので、申し訳ないのですが、
引き続き、ご回答の程よろしくおねがいいたします。

回答No.5

partita

画像そのものに白い余白がある、というオチではないでしょうか？

もしくは、タグの間に全角スペースがあるとか。

補足

回答、ありがとうございます！

> 画像そのものに白い余白がある、というオチではないでしょうか？

質問の文章の再掲載になってしまうのですが、、

試しに
<tr height="90"><th valign="bottom">
<img border="1" ...
とやると、画像がテーブルの中で下の方に配置されますが、やっぱり下に3～4dot程度の余白ができます。
また、余白はimgのborderの外側にあります。

という感じで、imgタグのborder="1"にして、確認しました。

> もしくは、タグの間に全角スペースがあるとか。

全角スペースはないと思うのですが、改行はあります。

実際、No.1さんの補足で書いたのですが、これが問題になっているようです。
この辺りに詳しい方、是非、よろしくおねがいします！

回答No.4

steel_gray

他の方の回答ともかぶりますが、提示されたhtmlでセルの枠と画像の間に余白が付くことは考えにくいです。

たとえば、border=0では余白が付いていることを確認することするも難しいはずですが、どのように余白の存在を確認しましたか？
もしかしたら、セルと画像の間ではなく、tableとその周りの要素の間に余白があるということですか？
実際のhtmlを省略して記述しているなら、実際のhtmlを見ないと原因の特定は難しそうです。
さらに、他にスタイルシートなどはありませんか？
また、画像そのものに余白がついていないかは確認済みですか？（ついでに、webで公開するのが目的ならbmp以外の形式に変更したほうがいいでしょう。）

補足

回答、ありがとうございます！

> border=0では余白が付いていることを確認することするも難しいはずですが、どのように余白の存在を確認しましたか？

質問内容の最期にちょこっと書いたののですが、border="1"にして確認してます。

> 実際のhtmlを省略して記述しているなら、実際のhtmlを見ないと原因の特定は難しそうです。
さらに、他にスタイルシートなどはありませんか？

No.1さんの補足で、ソースをインターネットで公開してみました。
引き続き、みていただけると助かります。。

>さらに、他にスタイルシートなどはありませんか？
本来のソースでは設定していますが、No.1さんの補足で公開したソースからは外してありますが、やっぱり現象は再現しています。

>また、画像そのものに余白がついていないかは確認済みですか？（ついでに、webで公開するのが目的ならbmp以外の形式に変更したほうがいいでしょう。）

これも質問の最期にちょこっと書きましたが、imgタグにborder="1"を付けて、確認して、imgの外側に余白ができていることを確認しています。

今も、bmpでの公開を考えていて、自分の環境では何も問題なく表示されるのですが、どのようなブラウザ環境の場合にbmpだと問題になるのか、教えていただけますでしょうか？

なにぶん、勉強不足なもので。。
よろしくおねがいいたします。

回答No.3

moon_night

ご質問にあるHTMLソースがすべてならば余白はできません。

隙間ができるとおっしゃられるからには、そのソースの下に何かを記述なさっているわけですよね？
そこまでのソースを掲示してみてください。

CSSを設定している場合はそれで余白ができる場合もあります。

補足

回答、有難う御座いました！

No.1さんへの補足でソースと、
実際にインターネットで公開してみました。

実際のソースではCSSを設定していますが、質問用の公開版では外してあります。

＞そのソースの下に何かを記述なさっているわけですよね？

ソースの下に記述してる内容は、改行だけです。

改行の有無で余白が出来るようなのですが、
改行してはいけない理由がわからないので、
この辺りに詳しい方、是非教えてください。

回答No.2

zexus

すみません、No.1です。補足させて下さい。
私の認識不足でした。dotとpxは同じ意味でした。
ただ、BMPの画像は表示できませんので、そちらを直せば問題無いかと思います。
それでも駄目な場合は、テーブルの幅を相対指定(％)にすれば問題無いかと思います。

補足

（No.1への回答と同じです）

画像種類についてですが、bmpは駄目なのでしょうか？
思い切り、bmpで公開するつもりだったのですが。。
実際に見ていただくと分かる通り、gifだと色数が限られていて画像が荒くなってしまうので。

面倒なので、問題がなければbmpで公開したいと考えているのですが。

回答No.1

zexus

試しに同じコード？で確認してみましたが、すき間は出来ないようです。
私の認識不足かも知れませんが、画像をdotで、しかもBMPで保存したものが、画像としてきちんと表示されているのでしょうか？
基本的にサイトで使える画像の拡張子は、Jpg,gif,pngなので、まず拡張子をこの３つのどれかにして、dotでは無く「px」を使ってはいかがでしょうか？
テーブルの余白などに問題は無さそうなので、そうすればきちんと表示されるかと思います。
あまり参考にならなかったでしょうか？

補足

回答、ありがとうございました！

色々試していて、あと一歩というところまで来ていると思うので、現在の状況を説明します。

余白が出来る場合と出来ない場合の、最終的な違いが把握できました。

下記に実際のソースを載せましたが、テーブルで区切って３つの画像を表示しています。
３つの画像の違いは、HTMLソースの途中で改行をしているかしていないかだけです。

<img>タグの後に改行すると空白が出来るようです。
これについて、改行してはいけない理由がわからないので引き続き調査してます。
どなたかわかったら教えてください。。

画像種類についてですが、bmpは駄目なのでしょうか？
思い切り、bmpで公開するつもりだったのですが。。
実際に見ていただくと分かる通り、gifだと色数が限られていて画像が荒くなってしまうので。

bmpVersion http://www.trente.jp/index_bmp.html
gifVersion http://www.trente.jp/index_gif.html

ソース----------------------------------------
<html>
<body>
<table border="2" cellspacing="0" cellpadding="0">
<tr><td>
<img src="img/header.bmp" border="0">
</td></tr>

<tr><td><img src="img/header.bmp" border="0"></td></tr>

<tr><td>
<img src="img/header.bmp" border="0"></td></tr>

</table>
</center>
</body>
</html>
-----------------------------------------------