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啦,其他方式个人感觉不是很好用,以上三种还是比较方便 靠谱的,希望可以帮到大家!