如何消除div之间的空隙

最新推荐文章于 2023-09-05 13:26:26 发布

蓝色清晨_

最新推荐文章于 2023-09-05 13:26:26 发布

阅读量2w

点赞数 9

分类专栏： CSS 笔记

本文链接：https://blog.csdn.net/yingleiming/article/details/79971693

版权

CSS 笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

问题描述:三个div，变成行内块（display：inline-block）之后，div之间会产生空隙；如图所示:
这里写图片描述
产生的原因：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小div在大div中居中的方法</title>
    <style>
    .parent {
          width:600px;
          height:200px;
          border:2px solid #000;
          /*font-size: 0;*/
        }
    .child {
        width:150px;
        height:100px;
        margin: auto; 
        display: inline-block; 
    }
    .parent>div:nth-child(1){
        background: red;
    }
    .parent>div:nth-child(2){
        background: blue;
    }
    .parent>div:nth-child(3){
        background: green;
    }
    </style>
</head>
<body>

    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

浏览器解析的时候，会把行内元素（包括行内块元素）之间的回车换行符解析成一定的间隙，间隙的大小跟默认的字体大小设置有关。
解决办法:将其父元素加上font-size：0的属性，这样就不会有间隙了。注意哦，如果有字，就会看不见了。或者下面这种不换行的写法，但是实际开发中是不现实的。

    <div class="parent">
        <div class="child"></div><div class="child"></div><div class="child"></div>
    </div>

蓝色清晨_

关注

9
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
如何消除div之间的空隙

问题描述:三个div，变成行内块（display：inline-block）之后，div之间会产生空隙；如图所示: 产生的原因：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;小div在大div中居中的方法&
复制链接

扫一扫

专栏目录