画像の下に無意味な余白が空く

トップページに置いた画像ファイルであるが、この下にどうしても無意味な余白が空いてしまう。(Firefoxで表示させた場合)
考えられる範囲で試行錯誤してみたが解決せず、苦肉の策でダミーファイルを使ってごまかした。

#topimg{
  margin: 0;
  padding: 0;
  text-align: center;
  border: solid #0000cc;
  border-width: 0 0 1px 0;
  width:800px;
  height:180px;
  background: url(http://blueroad.sakura.ne.jp/top.jpg) left top no-repeat #ffffff;
}

top.jpgを表示させたい箇所
<div id=”topimg”><img src=”space.gif” width=”800″ height=”170″ border=”0″ alt=”” /></div>

しかし、これでは根本的な解決にはならない。あくまでも暫定処置である。

本日、たまたま違う件で調べモノをしていたところ、根本的な解決方法が見つかった。

HTML4.01 strict と transitional における画像余白?の差異(解決編)
http://plaza.rakuten.co.jp/oyadomymy/diary/200606220000/

「imgをブロック要素に変える」という案は、まさに“目から鱗”。素晴らしい。



関連エントリー