如何消除div之间的空隙

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79971693

问题描述:三个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>
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页