深入CSS之去除inline-block元素间的多余间隙

什么是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越大，该间隙越大）。

---

如何去除这些多余的间隙？

在明确了这些间隙产生的原因后，要去除这些间隙就变得容易多了，通常有以下集中办法去除这些间隙：

1. 去除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的值要依情况设置，不好控制。

3. 父容器设置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都是０）。

4. 父容器设置display: flex;

优点：弹性布局可以去除多余间隙，而且可以轻松的实现垂直居中，水平居中等效果。
缺点：过低版本的浏览器不支持该属性。