読者です 読者をやめる 読者になる 読者になる

毎日がひとりオフ

ネットの話題とITと音楽。

IE6のリストで画像を並べた際の余白を取る

IE6にてリストに画像が配置されている際の余白を回避する方法。

<ul>
<li><img src="hoge.gif"/></li>
<li><img src="fuga.gif" /></li>
</ul>

この場合、hogeとfugaの間に余白が生まれる。
IE6のデフォルトスタイルを無効化していても同じ結果に。
そこで、liのディスプレイモードをinlineに変更し、imgをblockにすれば、余白を無くすことができる。
※display:blockを内包しているdisplay:inlineでは、表示モード自体はdisplay:blockのままとなる。

li{
display:inline;
}
img{
display:block;
}