如何去除 Inline Block 元素之间的空格
问题是这样的：如果几个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。这只是将一些元素放置在一行上的一种布局方式。正如你在书写英文时单词之间要有空格。这些留着元素之间的空隙正如英文单词之间的空隙。也许你认为HTML的新规范里应该修改这种情况，让inline-block元素之间不留空隙，但我认为这一天很难到来。
下面是我给大家提供的一些消除这些缝隙的技巧，可以让这些inline-block元素肩并肩的紧紧的连接着对方。
1、去除它们之间的空白
它们之间之所以有缝隙，就是因为你在这些元素之间留有空白(换行符、tab等)。清除它们之间所有的空白，就能解决这些问题，这里有几种技巧：
<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>这些做法都很怪异，但都能解决问题。
2、使用负的margin值
给它们施加一个-8px的margin值，也能使这些元素紧贴在一起，但这个负值并不是固定的，需要根据页面字体的大小来调整。
nav a {
display: inline-block;
margin-right: -4px;
}3、不写闭合标签
HTML5并不在意你这样写代码。虽然这样做可行，但总是感觉怪怪的。
<ul>
<li>one
<li>two
<li>three
</ul>4、将字体大小设置为零
如果这些空隙的font-size值为零，那它们的宽度也将为零。
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}这种设置font-size: 0;的技巧在安卓手机上好像有些问题。Jellybean之前的版本根本无法去除这些空隙，而Jellybean里有一个bug，就是，有时候，最后一个元素上会出现一点小缝隙。
还有，如果你的字体大小使用ems单位，设置零大小的字体会出现问题，因为ems将会联级将子元素的字体大小也设置成零。Rems可以用，只要是非联级font-size方式都可以。
4、使用float来排列它们
事实上，我们可以完全不需要inline-block，我们可以使用float让它们紧密的排列在一起。但这个实现需要给它们设置宽度和高度，以及padding等东西。但是，这样一来，我们也就无法向对待inline-block一样使用text-align: center; 来居中它们了。
5、使用最新的flexbox技术
如果你不担心浏览器的兼容情况的话，而且你还想实现居中，这个时候可以使用flexbox技术。这种技术并不是一种完全可以替代其它方式的布局模式，但在这里完全解决我们的问题。你可以参考三分钟学会css3中的flexbox布局这篇文章。
