解决标签间的间隙问题(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;
}

•  

图片之间的间隙就没有了： 

但是font-size有继承性，在父元素设置了font-size子元素的所有元素都受到其影响！不过对照其他方案，这种方案又是最好的！