如何消除显示元素之间的空白：内联块？

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。