リストタグに画像を入れた場合

質問

リストタグに画像<img>タグを入れたのですが、Firefoxでは隙間なく表示されますが、IE6で確認すると、画像の下に隙間ができてしまいます（3pxほど）。
何か修正点や、解決策があればお願い致します。
そもそも、リストタグに画像を入れることがおかしいのでしょうか？

【HTML】
<ul id="navi">
<li><img src="../img/aaa.gif" width="200" height="50"></li>
<li><img src="../img/bbb.gif" width="200" height="50"></li>
<li><img src="../img/ccc.gif" width="200" height="50"></li>
<li><img src="../img/ddd.gif" width="200" height="50"></li>
</ul>

【CSS】
ul#navi{
margin: 0px;
padding: 0px;
}
ul#navi li{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: outside;
display: block;
width: 200px;
height: 50px;
}

回答No.2

神崎 渉瑠（@taloo）

ul#navi li img{
border:0;
margin:0;
padding:0;
}
または
ul#navi li img{
vertical-align: bottom;
}
もしくはその両方。
たぶん。

font-sizeとline-heightは<img>ではなくテキストを併用したときや、
ネットワークエラーなどで画像が読めずにalt属性が展開されたときに弊害が出るかもです。
（Firefoxはalt属性が展開されると、<img>のwidth属性などが無視され、<span>と同じ扱いになります）

お礼

vertical-align: bottom;
で解決できました。
border:0;
margin:0;
padding:0;
と併用して使用した方が良さそうなので、併用して使用させていただきます。
ありがとうございました。

回答No.1

tenderfeel

ul#navi liに以下追加してみてください。
font-size:0;
line-height:0;

お礼

こちらで解決できました。
テキスト分の余白ができていたんでしょうか。

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