CSS元素之间的空白问题

帅哥不洗头

于 2024-07-19 16:27:59 发布

阅读量358

点赞数 4

分类专栏：前端CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_74401967/article/details/140553441

版权

前端CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

元素之间产生的空白问题原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析成为一个字符，一个空白的字符，所以会占用一个位置。

<div>
        <span id="d1">春江潮水连海平</span>
        <span id="d2">海上明月共潮声</span>
        <span id="d3">人生代代无穷已</span>
        <span id="d4">江月年年望相似</span>
</div>

例如：行内元素的代表：span

还有行内块儿元素的代表：img

解决方案一：去掉所有换行的符号就可以实现无缝衔接了（不推荐）

解决方案二：把行内元素、行内块儿元素的父元素的font-size设置为0px，在有文字的子元素上单独设置字体大小即可。

<style>
        div {
            font-size: 0px;
        }
        #d1 {
            background-color: yellowgreen;
        }
        #d2 {
            background-color: goldenrod;
        }
        #d3 {
            background-color: rgb(24, 194, 182);
        }
        #d4 {
            background-color: purple;
        }
        span {
            font-size: 20px;
        }
</style>

这样就可以完美解决元素之间的空白问题：