li 与 li 之间有空白间隔是什么原因引起的，有什么解决办法

li 与 li 之间有空白间隔是什么原因引起的，有什么解决办法

• 原因

  浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观，我们通常是一个

• 放在一行，这导致
• 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度（大约8px左右）。

• 解决办法

  • 为

  • 设置 float: left;
    

    不足：有些容器是不能设置浮动，如左右切换的焦点图等

  • 将所有

  • 写在同一行
    

    不足：代码不美观

  • 将

    内的字符大小直接设为0，即 font-size: 0;

    不足：

    中的其他字符大小也被设为0，需要额外重新设定其他字符大小，且在Safari浏览器依然会出现空白间隔

    • 消除

      的字符间隔letter-spacing: -8px;

      不足：这也设置了

      内的字符间隔，因此需要将

      内的字符间隔设为默认 letter-spacing: normal;