有三个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