"内联块"div之间的神秘空白

Question

我有这样的布局:小提琴链接

在.td之间是一些空白区域,即使margin和padding设置为0.

为什么会发生这种情况以及如何解决这个问题？可能会留下负边际？还是更好的解决方案？

<style>
.tr {
    height: 20px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    word-spacing: 0;
}
.td {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div>
    <div class="td" style="width: 50px; background-color: #AAA;"></div>
    <div class="td" style="width: 50px; background-color: #666;"></div>
</div>

Answer 1

解决方案1:添加评论:

<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div><!--
    --><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
    --><div class="td" style="width: 50px; background-color: #666;"></div>
</div>

您也可以在同一行上编写所有内容,但通过注释看起来更干净.

解决方案2:添加font-size:0到父元素.不要忘记为子元素定义font-size:

.tr {
  font-size: 0;
}
.td {
  font-size: 15px;
}