css:inline-block存在的小问题

最新推荐文章于 2022-01-20 11:02:51 发布

唐僧洗头用飘油

最新推荐文章于 2022-01-20 11:02:51 发布

阅读量585

点赞数

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

本文链接：https://blog.csdn.net/weixin_45977625/article/details/122346995

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题：

最近在项目中遇到一个问题，在div使用了display:inline-block后，div之间会存在空白间隙，翻阅资料后发现，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
在这里插入图片描述

去除空隙的方法：

1.将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行；
2.父元素中设置font-size为0，在子元素上重置正确的 font-size；（更倾向于这种方式）；
在这里插入图片描述
demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body{
            padding: 0;
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            display: inline-block;
        }
        .box {
            width: 420px;
            font-size: 0;
        }
        .box1 {
            background-color: #0f2027;
        }

        .box2 {
            background-color: #1d4350;
        }
        .box3 {
            background-color: #1f4037;
        }

        .box4 {
            background-color: #000000;
        }
    </style>
</head>
<body>
<h1>

</h1>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
</body>
</html>