font-size：0 —— 解决inline、inline-block元素间的空白间隙

很多时候我们都会遇到这么个问题：display为inline和inline-block的时候，当你代码换行后，会在网页上产生一个空格，这个空格有可能会导致最后一个会掉下来。避免方法可以不换行，只不过这种方法很不好，所以一般都是设置 font-size：0

如图：
一般我们是这样的：

内容和左图是挨着的，给人的呈现感很好，这里的font-size：0；

但是当font-size为负的和大于0的时候样式变了，如下：

右边就会掉下来。

问题的根源是 inline（a标签默认是display:inline） 和 inline-block (.list-info 设置的是 display:inline-block) 是内联布局，既然是内联那么就会受空白区域的影响。
这里我们可以去掉空白，但是最好的解决办法就是：font-size:0 可以让空白区域消失。

细致讲解：

1、文字块之间的空格间隙
代码如下：

<ul>
    <li>我是第一项</li>
    <li>我是第二项</li>
    <li>我是第三项</li>
    <li>我是第四项</li>
</ul>

设置CSS如下：

<style>
    ul {
        list-style: none;
    }
    li {
        width: 25%;
        display: inline-block;
        background: green;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
</style>

表面上我们看这些应该是出于同一行，没什么问题，但是效果确是下面这样的：

我们为了页面代码的整洁可读性，往往会设置一些适当的缩进、换行，但当元素的display为inline或者inline-block的时候，这些缩进、换行就会产生空白，所以出现上述问题。虽然还有其他方法能解决我们因为缩进、换行而产生的问题，但此时，最合适的方法就是给li的父级ul设置： font-size: 0; 给li设置：font-size: 16px; 如此就达到了所需效果。

2、图片间的空白间隙：
其实图片的间隙问题也是因为我们的换行、缩进。

<div>
     <img src="pic1.jpg">
     <img src="pic2.jpg">
</div>

两张图片之间就会出现这样的间隙：

给这个div设置

div {
    font-size: 0;
}

这样图片间的空白间隙就没有了！