如何消除使用 display:inline-block 定位的元素之间的空白？ [复制]

Question

我需要连续显示三个框，使用以下代码，我总是得到它们之间的几个像素的“间隙”。

我想知道：

• 如何有盒子，一个接一个，没有空间？我知道我可以添加一些负像素，但我正在寻找更整合的解决方案
• 为什么会这样？我可以重新设置帮助来解决这个问题吗？
• 你知道其他更好的选择吗？

div {
    box-sizing: border-box
}
.box {
    width:50px;
    height:50px;
    background-color:red;
}
#a, #b, #c {
    display:inline-block;
}

<div id="container">
    <div id="a" class="box"></div>
    <div id="b" class="box"></div>
    <div id="c" class="box"></div>
</div>

Answer 1

是的font-size: 0px 给父母和vertical-align: top。