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

向右看齐 2022-05-19 14:06 344阅读 0赞

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

如图：  
一般我们是这样的：  
![这里写图片描述][70]  
内容和左图是挨着的，给人的呈现感很好，这里的font-size：0；  
![这里写图片描述][70 1]  
但是当font-size为负的和大于0的时候样式变了，如下：  
![这里写图片描述][70 2]  
右边就会掉下来。

**问题的根源**是 `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如下：

表面上我们看这些应该是出于同一行，没什么问题，但是效果确是下面这样的：  
![这里写图片描述][70 3]  
我们为了页面代码的整洁可读性，往往会设置一些适当的缩进、换行，但当元素的display为inline或者inline-block的时候，这些缩进、换行就会产生空白，所以出现上述问题。虽然还有其他方法能解决我们因为缩进、换行而产生的问题，但此时，最合适的方法就是给li的父级**ul设置： font-size: 0;** 给**li设置：font-size: 16px**; 如此就达到了所需效果。  
![这里写图片描述][70 4]  
**2、图片间的空白间隙：**  
其实图片的间隙问题也是因为我们的换行、缩进。

两张图片之间就会出现这样的间隙：  
![这里写图片描述][70 5]  
给这个div设置

div { font-size: 0; }

![这里写图片描述][70 6]  
这样图片间的空白间隙就没有了！

[70]: /images/20220519/943760ba49a24abb95fbdd6f0fa6b420.png
[70 1]: /images/20220519/865e427d90ea4fa4be5209c2b54c49be.png
[70 2]: /images/20220519/7169aa8171234ad4a2b0fe8a9d2d3e78.png
[70 3]: /images/20220519/43aed9dd3aec40f4b40988803c673af3.png
[70 4]: /images/20220519/7e1f91467cc24bff86bd28aebd32d19e.png
[70 5]: /images/20220519/c6816eda9056400dbce761a2476aeace.png
[70 6]: /images/20220519/f871842fbfe24ad881034236c466e043.png