什么是inline-block之间的多余间隙
考虑以下代码：
<nav>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>
nav a {
display: inline-block; //或者inline;
padding: 5px;
background: red;
}
我们会得到如下结果：
通常情况下这并不是我们想要的结果
诶？我们明明没有在设置margin-right，为什么a标签之间会有间隙？
答： 产生的间隙来自于html代码中标签与标签之间的间隙, 该间隙会根据父容器的字体大小而变化（上述示例代码中，nav的font-size越大，该间隙越大）。
如何去除这些多余的间隙？
在明确了这些间隙产生的原因后，要去除这些间隙就变得容易多了，通常有以下集中办法去除这些间隙：
- 去除html代码中的间隙：
将代码写成一行：
<nav>
<a href="#">One</a><a href="#">Two</a><a href="#">Three</a>
</nav>
或者用注释填充：
<nav>
<a href="#">One</a><!--
--><a href="#">Two</a><!--
--><a href="#">Three</a>
</nav>
都可以去掉这些多余间隙。
去掉间隙后
优点： 不需要通过css处理，从根本上解决问题
缺点： 代码可读性降低，项目里写成这样估计会被吊起来打。
2.通过负的margin抵消多余间隙
nav a {
display: inline-block;
padding: 5px;
background: red;
margin-right: -4px; //增加了这一行
}
优点： 简单
缺点： 由于多余间隙的大小会受父容器的font-size大小影响，所以margin-right的值要依情况设置，不好控制。
- 父容器设置font-size:0; 内部子元素单独设置字体大小，即：
nav {
font-size: 0; //增加了这一行
}
nav a {
display: inline-block;
padding: 5px;
background: red;
font-size: 14px; //增加了这一行
}
优点：相比与设置负的margin-right大小的不确定性，设置font-size:0;显得更加好控制。
缺点：由于font-size的可继承性，导致其子元素都继承font-size:0;只能重写覆盖。如果项目中的字体大小设置采用的是em而不是px, 那么子元素的字体大小就无法通过em来进行设置了（不管多少em都是０）。
- 父容器设置display: flex;
优点：弹性布局可以去除多余间隙，而且可以轻松的实现垂直居中，水平居中等效果。
缺点：过低版本的浏览器不支持该属性。
