开发中可能会遇到：一连串的inline-block元素在格式化HTML 之后会出现间隔。
举个栗子：
<nav>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>
nav a {
display: inline-block;
padding: 5px;
background: red;
}
将在页面上显示：
往往我们需要的是每个元素拼接连在一起。像导航栏这种，我们就要避免不能点击的空格出现。
这不是一个bug（我不认为是）。它仅仅是让元素在一条线上如何显示的习惯。正确的书写不就是单词之间应该有空格的吗？而inline-block元素之间的空格就像两个单词之间的空格。这也不是说规范不能更新，关于取消两个inline-block元素之间的空格，但我确定这几乎是不可能发生的事。
下面是一些能避免空格让元素紧连在一起显示的方法：
移除空格
之所以显示时看到空格是因为本来就有空格在两个元素之间（换行和一些tabs都会视为空格，它们仅仅是让结构更加清晰）。从HTML结构入手可以解决这问题，下面是一些处理的技巧：
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
或者，
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
又或者添是加注释的方式，
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
设置margin值为负值
可以通过设置负值的margin让元素回退将空格位置占满（具体数值需要根据父元素的字体大小来调整）。不过这种方式在比较老的IE浏览器（6 & 7）中会有些问题，如果你不需要考虑那些浏览器，就可以用这种方法避免显示的空格，又能保持清晰的HTML结构。
nav a {
display: inline-block;
margin-right: -4px;
}
跳过闭合标签
在HTML5 下跳过闭合标签依然能正常工作。虽然可以这么做，但还是觉得奇怪。
<ul>
<li>one
<li>two
<li>three
</ul>
设置font size的值为零
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
Matt Stow 研究font-size: 0;发现：这种做法在安卓中会出现一些问题。“Jellybean之前的版本并没有移除间隔, Jellybean版本有一个bug，就是有时最后一个元素有一个比较小的间隔。”
另外需要注意，如果字体使用的单位是em，被设置font size值为零的元素也会默认将它级联的子元素的字体大小设置为零。不过使用rem就可以避免这个问题，除此之外就是使用其他非级联font-size。
还有另外怪异的地方！Doug Stewart告诉我，如果使用了@font-face并且使用了该方法，在afari 5.0.x字体将失去anti-aliasing属性。（测试栗子）（效果图）
使用浮动代替
也许并不需要让元素inline-block化，也许可以通过设置浮动让它们一个接一个。这允许你为它们设置它们的width、height、padding。但是不能像父元素是inline-block那样通过设置text-align: center;让它们居中。
使用flexbox代替
如果浏览器支持flexbox，并且你需要使````inline-block```元素居中，可以使用flexbox。它们虽然不是完全可互换的布局模型，但是你可能会得到你需要的效果。
