请叫我一米

在经过了IE6 IE7的洗礼之后，我们终于可以放心的使用 inline-block 了，但是在使用 inline-block 的时候，我们总会发现很多莫名其妙的空隙出现在两个 inline-block 元素之间，例如我们的代码如下所示：

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

然后在浏览器里面的结果就是：

但是一般情况下，我们这么写，总是想让各个元素紧挨在一起的，如果需要中间有空隙，那我们可以通过 css 来更精确地控制。难道这个是一个 bug。刚刚好可以方便的使用这个属性值了，又出现 bug 了，难道又要骂娘了？

其实，了解了背后的原理，就明白这里其实并不是一个 bug，因为对浏览器来说，回车和换行都会被当做有效地字符，只是看不见而已，由于其被当做有效地字符，所以这个空隙的大小会随着定义的文字大小而改变，所以这里也就是为什么我们不需要它的出现，而要自己控制间隙的原因。那么既然知道了产生这个问题的原意，那就有解决方案来应对它。

方法一，可以通过代码来去掉这个inline-block 元素之间的空格。

<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>

或者

<nav>
  <a href="#">One</a><!--
  --><a href="#">Two</a><!--
  --><a href="#">Three</a>
</nav>

然后，这就解决了这个问题，主要就是想办法去掉那个换行或者空格。但是这样子的话，会让我的结构很不好看，尤其是对于处女座的前端来说。

方法二：负边距

nav a {
  display: inline-block;
  margin-right: -4px;
}

此时需要给相应的元素以负边距来抵消产生的空隙，但是上面的原因说过了，由于跟其字体大小有关系，所以在具体的情况下，需要更具字体来调整。风险是，万一用户系统中没有你设定的字体呢？

方法三：不写结束标签

<ul>
  <li>one
  <li>two
  <li>three
</ul>

方法四：字体大小 0

由于空隙来源于字符，那我让他为 0 的大小不就行了？对嘛，真聪明。

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

不过，这样的方式，在某些平台以及某些浏览器上是有 bug 的。而且，如果使用 em 作为单位，那么下面的文字再怎么设置都是 0 了（em相对于父级）。

反正，每种方法都不算优雅，但基本都可以解决问题。

但或者，我们有可能根本就不需要 inline-block ，float 如果好用的话。或者以后可以用 flexbox 了。美好的愿望，在国内。

来源于：Fighting the Space Between Inline Block Elements 按自己的理解翻译，未忠实于原文。

永远有多远，或许只有一米的距离.

解决 inline-block 元素之间的空隙