css 内联元素的间隙处理

开发

发布日期: 2019-09-12


 <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box div{
            color: #fff;
            width: 100px;
            height: 100px;

        }
        .box div:first-child{

            background: #000;
        }
        .box div:last-child{
            background: #f34f55;
        }
        
    </style>

<body>
<div class="box">
    <div>1212</div>
    <div>2323</div>
</div>
</body>

这是默认的块元素，我们给他内联，横向安排一下。

 .box div{
            color: #fff;
            width: 100px;
            height: 100px;
            display: inline-block;

        }

这里出现了一个间隙，一般是4px

改点代码

   .box{
            font-size: 0;
        }
        .box div{
            font-size: 16px;
            color: #fff;
            width: 100px;
            height: 100px;
            display: inline-block;

        }