父级元素的　font-size:0　解决子代的inline或inlien-block的换行或图片空隙问题

快来打我* 2021-10-09 03:16 196阅读 0赞

## 参考：http://blog.csdn.net/lihchweb/article/details/74654154    ##

## 1. 比如在写如下代码的时候： ##

<ul>
        <li>我是第一项</li>
        <li>我是第二项</li>
        <li>我是第三项</li>
        <li>我是第四项</li>
    </ul>
     
      
       1
       2
       3
       4
       5
       6

设置css如下：

表面上看应该是出于同一行，没什么问题，但是效果其实是下面这样的：![内容4掉了下来][4]

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

![达到效果][SouthEast]

## 2. 图片间的间隙问题。 ##

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

<div>
         <img src="pic1.jpg">
         <img src="pic2.jpg">
    </div>
     
      
       1
       2
       3
       4

两张图片之间就会出现这样的间隙：   
![这里写图片描述][SouthEast 1]

给这个div设置

div { font-size: 0; }
     
      
       1
       2
       3

图片之间的间隙就没有了：   
![木有间隙][SouthEast 2]

[4]: /images/20211009/857cbc332eb74801991c3debb2fad34f.png
[SouthEast]: /images/20211009/be5f4167333747658e0030ec9e5e9b1c.png
[SouthEast 1]: /images/20211009/8e16c0934748451b9308b256f37bbeb7.png
[SouthEast 2]: /images/20211009/dcb7561e9b854091b17f0fddf11ec8af.png