前回、HTMLでリストを使用した際に空いてしまう隙間を
埋める方法をご紹介しましたが、今日はその続きです。
画像でナビゲーションバーを作った場合に出来るこの隙間。
vertical-align:top か bottomを指定する以外にも、
いくつか方法があります。
例えばフォントサイズを小さくしたりline-heightを無くしてしまう。
li {
font-size:1px;
line-height:0;
}
あるいは、IE6ではリスト内のaなどインライン要素を
display:block;などでブロック化した場合、
line-heightの解釈がおかしくなるようです。その対処法として、
li a {
display:block;
line-height:normal;
}
など試してみて下さい。これで隙間はきれいに埋まるはずです。
パソコンスクールISA渋谷校/INOUE