代码换行导致的inline元素间距bug

1. inline 元素：

如果inline元素(span, strong, b, em, i等)代码换行，它们之间会产生我们不希望的间隔。通过设置margin:0或者padding:0 , 这个都间隔仍然存在，说明这个间隔并不是margin或者padding。

是否为了不消除这个间隔，就必须把inline元素的html代码写在一行内呢？答案是否定的。 开发的时候，为了方便阅读和调试，我们习惯于把代码写成这样：

    <p>
        <span>inline元素 1</span>
        <span>inline元素 2</span>
        <span>inline元素 3</span>
        <span>inline元素 4</span>
        <span>inline元素 5</span>
    </p>

解决方法：设置父元素font-size:0，再给子元素单独设置font-size，修复bug。

2. inline-block 元素：

要在一行展示多个并列的元素，除了通过设置浮动float:left;float:right，我们还可以通过设置display:inline-block 把 inline 元素或 block 元素，转换成一个可以设置高度和宽度的 inline-block 元素。

如果有5个inline-block元素，设置它们的宽度为20%。我们期望它们是在一行展示的。但是因为 html 代码换行产生了间距，导致无法在一行内显示。

解决方法: 设置父元素font-size:0，再给子元素单独设置font-size。