css display: inline-block; 行内块级元素之间的间隙怎么解决

作者: tww844475003 分类: 前端开发 发布时间: 2023-05-15 23:24

在页面排版中,我们经常会有需要把多块内容放在一行显示。最常用的一种方法就是设置子元素为行内块级元素, display: inline-block;。当然也还有其它方式,如:display: flex; 等,这里就不展开讲了。

设置行内块级元素之后,细心的人就会发现子元素内容之前有个大概5个像素的间隙。

<div class="wrapper">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

为什么会这样了

这就是换行符空格间隙引起的问题,那如何解决了?

一、移除空格

虽然可以解决,代码可读性大大降低。

<div class="wrapper">
    <div class="child1">child1</div><div class="child2">child2</div>
</div>

二、使用 margin 负值

.child2 {
    margin-left: -5px;
}

三、使用 font-size: 0

.wrapper {
    font-size: 0;
}
.child1, .child2 {
    font-size: 14px;
}

四、letter-spacing

.wrapper {
    letter-spacing: -5px;
}
.child1, .child2 {
    letter-spacing: 0;
}

五、word-spacing

.wrapper {
    word-spacing: -5px;
}
.child1, .child2 {
    word-spacing: 0;
}
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注