<ul>
<li><a href=”#”><img src=””></a></li>
<li><a href=”#”><img src=””></a></li>
<li><a href=”#”><img src=””></a></li>
</ul>

というソースで、画像を使ったナビゲーションを作る場合、<li></li>で予期しない余白が入る。
これの回避方法をメモしておきます。

ﾂꀀ横型

ul.navi {
ﾂꀀpadding: 0px;
ﾂꀀmargin: 0px;
}
ul.navi li {
ﾂꀀdisplay: inline;
ﾂꀀlist-style-type: none;
ﾂꀀfloat: left;
}

という風に、float:leftを入れます。
次の要素にclear:both;を入れることも忘れずに。

縦型

ul.navi {
ﾂꀀmargin: 0px;
ﾂꀀpadding: 0px;
}
ul.navi li {
ﾂꀀdisplay: block;
ﾂꀀlist-style-type: none;
ﾂꀀfont-size: 1px;
ﾂꀀline-height: 100%;
}

という風に、font-sizeを小さくし、line-height:100%にします。

line-height:0px;

にする方法もあるようですが、検証していません。