去除inline-block出现间距的几种方法

Posted 2021-01-19 theblogs

display:inline-block，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会排列在同一行

比如两个input，默认中间会产生一些间距

 <div class="box">
        <input type="text">
        <input type="submit">
  </div>

解决方案有以下几种

1、将元素放在一行这样就不会产生间距了。（虽然看起来有些low...）

 <div class="box">
        <input type="text"> <input type="submit">       
</div>

2、给父级font-size：0

这个方法可以解决大部分浏览器下的元素之间的间距

.box{
      font-size:0;
}

不过考虑到兼容性，可以再加一个属性

 -webkit-text-size-adjust:none;

3、使用margin负值

 .box input{
       margin-right:-5px;
}

4、使用letter-spacing

 .box{
      letter-spacing: -5px;
}
.box input{
      letter-spacing: 0;
}