如何消除顯示元素間的空白：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。