トップページに置いた画像ファイルであるが、この下にどうしても無意味な余白が空いてしまう。(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をブロック要素に変える」という案は、まさに“目から鱗”。素晴らしい。