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

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

 

posted @ 2018-11-12 15:50  紫诺花开  阅读(324)  评论(0编辑  收藏  举报