两个span标签(或i标签)之间有间隙的问题

有三个i标签，中间一个放文字，前后两个放的是iconfont

效果图如下：

会发现三个i标签渲染出来之后中间会有挺大的空隙：

尝试设置边距为0无果：

解决方法：

方法一：（不推荐）

去掉三个i标签前后的空格（换行也不行），让它们连着写

的确有效果，但是这样代码太乱，看着难受；

方法二：

①将父元素font-size设置为0；

②在子元素（i）那里设置字体；

如果是span标签之间出现空隙，也可以用此方法解决。

update:

在实现如下图所示布局的时候，ul宽100%,li宽20%,inline-block并且没有左右内（外）边距，但是最后一个li还是被挤到了下一行

审查元素发现两个li之间其实是有一点空隙的（通过像素大厨测量大概是3px，通过查阅资料发现其实是4px），

解决方法：

①可以通过弹性布局display:flex来解决（默认会排列在一行，还要加一个flex-wrap:wrap让超出部分显示在下一行）

②给li设置float:left也可以解决

③同样地，ul的font-size设为0，li里面再具体设相应字体大小

④最直接但也是最不推荐的方法：li之间不换行也不要有空格

 

其实不仅是i和span，li甚至两张图片间出现缝隙的问题都可以用方法③解决。

上面提到的情况其实有共性：

①是内联元素或者内联块

②是其他元素的子元素

那么出现这个问题的原因是什么呢？？

这是因为内联或者内联块是同行显示的，而为了代码的整洁和可读性，通常会在li标签之间换行；HTML默认将多个空格显示为一个，这就是为什么两个li之间（准确地说是内联或内联块元素之间）会默认有一点间距。

原因知道了，解决的思路也就变成：怎么去掉这些空格；

除了上面提到的方法，其实还有很多可以去掉间隙的方式，如加注释等，具体的可以看看这个：

 https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements/5078297#5078297