根本原因: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;
}