行内块元素之间的间隙怎么去除？

最新推荐文章于 2025-06-15 11:24:37 发布

楊楊工作室

最新推荐文章于 2025-06-15 11:24:37 发布

阅读量594

点赞数 11

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/2402_84987408/article/details/147052676

一、问题现象

在CSS布局中，如果我们想要将多个行内块元素并排，会发现同行显示的inline-block元素之间会出现一定的空隙，这就是换行符/空格导致的，叫做换行符/空格间隙。

二、产生原因
当使用行内元素进行排版的时候，元素之间的符号采取一个都不放过的原则，通通都会都浏览器渲染，其中就包括换行符和空格，这两个极易被我们忽视的符号也会被浏览器渲染。，根据white-space的处理方式（默认是normal，合并多余空白）会将HTML中回车换行符转换成空白符，在字体不为空的情况下，会占据一定的空间，这就形成了我们所看到的inline-block元素之间的空隙。空隙的大小由字体大小决定，当行内元素font-size：16px时，间距为8px。

三、解决方案
在网上找了很多资料发现就以下两种方法缺点少一点比较实用，so，咱还是来点实用的吧。
方法一：为父元素中设置font-size: 0，在子元素上重置正确的font-size


.father {
        font-size: 0;
        width: 300px;
        height: 250px;
        background-color: #c3deb7;
 
    }
    .son {
        font-size: 16px;
        display: inline-block;
        width: 130px;
        height: 50px;
        background-color: #f9cc9d;
    }