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

在页面排版中，我们经常会有需要把多块内容放在一行显示。最常用的一种方法就是设置子元素为行内块级元素， 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;
}