css 内联元素的间隙处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

 <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

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

1
2
3
4
5
6
7
8
.box div{
           color: #fff;
           width: 100px;
           height: 100px;
           display: inline-block;

       }

image.png

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

改点代码

1
2
3
4
5
6
7
8
9
10
11
.box{
         font-size: 0;
     }
     .box div{
         font-size: 16px;
         color: #fff;
         width: 100px;
         height: 100px;
         display: inline-block;

     }

image.png

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