Solo  当前访客:1 开始使用

布丁与画家的博客

努力改变一小部分人解决问题的方式

css 内联元素的间隙处理

2019-09-12 15:13:57 iwh718
0  评论    0  浏览


 <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>

image.png

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

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

        }

image.png

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

改点代码

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

        }

image.png

这里出现的间隙不是bug,就是这么设计的,,是规范。


标题:css 内联元素的间隙处理
作者:iwh718
地址:看看我的CSDN

web站点:骇客猫科技资讯



今日诗词
QQ交流群:914105779

标签

友链

存档

TOP