display inline-block场景父级font-size为0

咱们在设置元素display: inline-block时，元素之间的换行显示或者空格分隔的情况下会有间距，我们使用CSS更改非inline-block水平元素为inline-block水平，也会有同样的问题。
这种间距会对我们的布局或者兼容性产生影响，需要去掉它，以下是N种方法。
一 移除空格
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

或者是：

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

使用注释也是可以的：

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

二 让闭合标签吃胶囊
如下处理：

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

注意，为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。
在HTML5中，我们直接：

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

三 使用font-size为0

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加：

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

四 使用letter-spacing

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

基本能搞定所有浏览器。
更多请看张鑫旭大神的这篇文章去除inline-block元素间间距的N种方法