listでナビゲーションを作成時に余白が出るのを回避する。

<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;

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です