バナーとバナーとの微妙な空白

質問

http://storeuser8.auctions.yahoo.co.jp/jp/user/jewelry_avenue
このサイトの右サイドメニューのバナーの微妙な空白があるのとないのが見られます。ＨＴＭＬでどのように違いを記述するのでしょうか？たとえば、サイドメニューの最上部”オススメ商品”と”新品未使用”の間には空白がなく、その下の”アイテム別検索”と”リング”の間には空白があります。ネックレスとペンダントトップというバナーにも空白があるように。ソースを見たのですが、違いがみつけられません。どなかたよろしくお願いします。

回答No.2

font_color · ベストアンサー

こちらのサイトではtableをつかってレイアウトされているようですね。
問題の箇所（右サイドメニューではなく左？）のソースを確認しましたが、記述に原因があるようです。

<tr><td>
<img SRC=***.jpg WIDTH=** HEIGHT=** BORDER=0></td></tr>
↑下に空白がない記述

<tr><td>
<img SRC=***.jpg WIDTH=** HEIGHT=** BORDER=0>
</td></tr>
↑下に空白ができている記述

分かりますでしょうか？
「</td></tr>の前に改行してるかどうか」が原因となっています。
（firefoxでは空白は出来ませんが）

ちなみに、これは有名ですが
<a href="">1</a><a href="">2</a><a href="">3</a>
と
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
とでは、同じ内容でも記述方法によってレイアウトが変わります。

回答No.1

noname#66720

確認していませんが、アンカーで囲っているかいないかの違いではないでしょうか？
IEのみで起こるようです。

問題の部分に<img src="画像へのリンク" style="display:block;">

とすると直るかもしれません。

あと、知識として空白等の見た目を制御するのはHTMLではなくCSSの扱う範囲ですので覚えておくと良いと思います。
おせっかいついでに、このような画像のメニューにはimg要素に対してalt属性をつけてやったほうが親切です。