如何去除行内元素之间的间隙

HTML代码如下

<div class="content">
   <a href="javaScript:;">大树</a>
   <a href="javaScript:;">小草</a>
   <a href="javaScript:;">花朵</a>
   <a href="javaScript:;">太阳</a>
</div>

、

效果如图所示，a标签为行内元素，他们之间按上面布局会出现空隙，这些空隙是怎么产生的。现在做如下调整:

<div class="content">
        <a href="javaScript:;">大树</a><a href="javaScript:;">
        小草</a><a href="javaScript:;">
        花朵</a><a href="javaScript:;">
        太阳</a>
</div>

此时可以看出，a标签之间的空隙消失了。由此可以推断出行内元素之间的空隙是由标签换行产生的。
如果把a标签的display改为inline-block 也会出现上述问题。