li与li之间看不见的空白间隔

同类问题：display:inline-block 什么时候会显示间隙？

原因

浏览器的默认行为是把 inline 元素间的空白字符（回车、空格、tab）渲染成一个空格，而它会变成一个空格，这些空白也会被应用样式，占据空间，所以会有间隔。

解决方法

1. 在源码中，删掉换行符，把 <li> 的代码写在一行

2. 设置包裹 <li> 的外层元素(<ol> 或 <ul>)的字体大小为 0，给<li>单独设置字体大小

3. 在 Safari 浏览器里 方法 2 依然出现空白，那么则设置外层元素的字符间隔为负值，并设置<li>的字体间隔为默认。

ul,
ol {
  letter-spacing: -5px;
}
li {
  letter-spacing: normal;
}