去除display:inline-block下的元素间隔问题

用display:inline-block属性时总是出现一些莫名其妙的间隔，

CSS代码：

.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}

HTML代码：

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

效果如下图：



对于这类问题，我经常用的方法是对他们的父元素添加 font-size:0 属性

CSS代码：

.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
 }

HTML代码：

<div class="space" style="font-size:0;">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>

效果如下：



在此感谢张鑫旭学长，这篇博客大多受他的启发，在他的博客中对此问题的研究较为深入.

此处贴出传送门：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/