font-size=0的妙用，解决div塌陷

今天写轮播图的时候发现，在设置图片宽度时，第二张图片会塌陷到下面去，其实是出于排版的原因两个div之间留下了空白字符，才导致两个div元素之间留有间距，导致图片塌陷。

另外，display：inline-block的元素之间会有一个字符的间隙，这个间隙导致了最后一个会掉下来。

解决方法：

1、给父元素设置font-size ： 0 p x；--------推荐
2、取消掉换行符，如这样：<span>a</span><span> a</span>< span>a</span>连续。

或者

<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>

3、使用margin负值。
4、使用浮动。
5、另外还有使用letter-spacing、word-spacing等方法。

虽然不换行可以暂时解决这一问题，但是肯定有更好的方法。在父类中设置font-size:0就可以完美地解决这个空白间距问题。