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

Posted theblogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了去除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;
}

 

以上是关于去除inline-block出现间距的几种方法的主要内容,如果未能解决你的问题,请参考以下文章

关于去除2个inline-block之间的间距

去除inline-block元素间间距的N种方法

去除inline-block元素间间距的N种方法

[转]去除inline-block元素间间距的N种方法

去除inline-block元素间间距的N种方法

去除inline-block元素间间距的N种方法