关于display: inline-block的间隙问题

Posted 2020-12-16 sloanlv

关于display的属性值设置为inline-block值时出现的间隙问题，有两种方式，欢迎补充。

<div class="super">
     <div class="sub"> 孩子 </div>
     <div class="sub"> 孩子 </div>
     <div class="sub"> 孩子 </div>
 </div>

方法一：设置margin

.sub {
  background: hotpink;
  display: inline-block;
  font-size:16px;
  margin-left: -0.4em;
}

方法二：负值字体设置为font-size: 0,但子集有字，需要单独设置

.super{
    font-size: 0;
}
.sub{
    width: 100px;
    height: 30px;
    background-color: pink;
    border: 1px solid #ddd;
    display: inline-block;
    font-size: 16px;
}