在经过了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你下成了inling-block，第二个是我很苦恼这个空格问题，但一直没有去深究，于是我只用float，没想到竟然看到了这么多方法，哈哈
十分感谢，已修复。
西安高级前端开发群慰问团前来围观，内容写得不错，围观完毕，再见。
哈哈哈，杰克，你个逗逼。