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

最新推荐文章于 2022-10-29 16:10:32 发布

宇宙无敌小可爱

最新推荐文章于 2022-10-29 16:10:32 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： css兼容文章标签： html 标签

本文链接：https://blog.youkuaiyun.com/diwuyanting/article/details/78646776

3 篇文章

订阅专栏

本文介绍了解决inline-block元素间出现间距的问题，提供了三种实用的方法：调整HTML代码结构、使用font-size:0; 和 word-spacing 属性，帮助前端开发者更好地进行布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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