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

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

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

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