去除display:inline-block下的元素间隔问题

Mammonmon

于 2016-08-15 20:21:18 发布

阅读量662

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html5 前端 css

本文链接：https://blog.youkuaiyun.com/Mammonmon/article/details/52214364

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决使用inline-block布局时出现的意外间距问题的方法，通过将父元素的font-size设置为0来去除链接间的空格。

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

用display:inline-block属性时总是出现一些莫名其妙的间隔，

CSS代码：

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}

HTML代码：

<div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

效果如下图：

对于这类问题，我经常用的方法是对他们的父元素添加 font-size:0 属性

CSS代码：

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
 }

HTML代码：

<div class="space" style="font-size:0;">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

效果如下：