浅谈CSS中的之间的空白间隔问题

问题：

有时候，我们需要将

横向排列，而又为了能设置其宽度和高度，为其设置display:inline-block，相邻

之间会出现8px的空白间隔，不是margin也不是padding。

原因：

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

放在一行，这导致

换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决：

方法一：为

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

方法二：将所有

写在同一行。不足：代码不美观。

方法三：将

内的字符尺寸直接设为0，即font-size: 0。不足：
中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。

方法四：消除

的字符间隔letter-spacing: -8px，而这也设置了
• 内的字符间隔，因此需要将
• 内的字符间隔设为默认letter-spacing: normal。