去除inline-block元素间间距

根本原因：inline-block元素之间之所以有空白间距是因为空格有字体大小原因。

 

第一种：

　　把代码之间的换行空白都去掉。

      例如：

     <div>第一个inline-block元素</div><div>第二个inline-block元素</div>

第二种：　　

　　把inline-block元素用一个大的div包起来，然后设置其字体大小为0即可，inline-block元素字体大小再单独设置。

　　例如：

     <div style=”font-size:0" class="space">
          <div>第一个inline-block元素</div>
          <div>第二个inline-block元素</div>
     </div>

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加： 

类似下面的代码：

.space {

    font-size: 0;

    -webkit-text-size-adjust:none;

}

 

转载于:https://www.cnblogs.com/ranyonsue/p/6148264.html