§ ITPOW >> 文档 >> CSS

空白间距-干掉 li 的空白间距、li 下面的 a 的空白间距

作者:vkvi 来源:ITPOW(原创) 日期:2010-9-16

li 的空白间距

看下面的代码:

<div>
  <ul>
    <li><img src="li.gif" alt="li" /></li>
    <li><img src="li.gif" alt="li" /></li>
    <li><img src="li.gif" alt="li" /></li>
    <li><img src="li.gif" alt="li" /></li>
    <li><img src="li.gif" alt="li" /></li>
    <li><img src="li.gif" alt="li" /></li>
  </ul>
</div>

li.gif 是一个宽 150px、高 50px 的纯色 #009999 的图像。效果如下:

li 间距

每个 li 之间有间距,IE、Firefox、Chrome 中均是如此。可能绝大多数第一感觉是:噢,设置 margin、padding 为 0 解决。可是我们设置了 *{margin:0px;padding:0px;},仍然不奏效。

那么会不会是 </li> 与 <li> 之间的空白字符在作怪呢?我们把上述代码弄成一行,仍然不奏效。

方法一、其实解决办法是给 li 指定 height,比如下面的代码:

li
{
    height:50px;
    vertical-align:middle;
}

在 Firefox、Chrome 中只需要 height 这一行就够了,而 IE 单这个还不行,还需要 vertical-align:middle。说明一下 vertical-align,并不是必须指定为 middle,指定 top、bottom 也是可以的。不要指定为 baseline,baseline 是默认值,指定 baseline 就相当于没指定一样;不要指定为 text-top、text-bottom,这样表面上看起来没间距了,实际这个 ul 总共高度都变了,与想要的效果完全不同。

方法二、给 li 指定 line-height:0px;

这个在标准浏览器中测试可行,但我没在 IE 中测试过。

这种方法有个好处,就是无法预知 li 高度的情况下可用。

a 的空白间距

a下面有 img,但是 a 的高度居然比 img 多一点点。

方法一、给 a 指定 font-size:0px; 

方法二、给 a 指定为 block,并 line-height:0; 试试。


相关文章