display:inline-block 元素间间距去除方法

display:inline-block 元素都会有间距 ，如图：

为此给大家分享几种解决方法：

1：元素间的间距是因为标签间的间距，所以我们可以直接去掉HTML的空格，但是考虑到代码可读性，所以不可能写成一行，那可以直接按照以下方式写：

<div>哈哈哈哈</div><!--
--><div>哈哈哈哈</div><!--
--><div>哈哈哈哈</div><!--
--><div>哈哈哈哈</div><!--
--><div>哈哈哈哈</div>

借助HTML注释；

<div>
   哈哈哈哈</div><div>
哈哈哈哈</div><div>
哈哈哈哈</div><div>
哈哈哈哈</div><div>
哈哈哈哈</div>

或者

<div>哈哈哈哈</div
><div>哈哈哈哈</div
><div>哈哈哈哈</div
><div>哈哈哈哈</div
><div>哈哈哈哈</div>

2：使用font-size:0;

.box{
    font-size: 0;
    -webkit-text-size-adjust:none;/*兼容谷歌最小字體限制*/
}
.box a{
    display: inline-block;
    font-size: 10px;
}

3：使用word-spacing：

.box{
    display: inline-table;/* 如果谷歌不好用可以加上这句，瞬间变得乖乖的，绝不再淘气*/
    word-spacing: -6px;
}
.box a{
    display: inline-block;
    word-spacing: 0;
}

OK啦，其他方式个人感觉不是很好用，以上三种还是比较方便 靠谱的，希望可以帮到大家！