带有内联块子元素的div不会始终显示相同的CSS

Question

我有一个包含几个内联块子项的div：

DOM看起来像这样：

它有以下CSS：

每个孩子都有以下css：

如果取消选中并重新检查 Chrome调试器中上面标记的display: block行，则div现在如下所示：

请注意，标签之间现在有空格，并且它们更具可读性。但是，用于渲染它的CSS大概是相同的。此外，当特定选择器的display: block未选中时，div实际上仍为display: block;它只是从一个不太具体的选择器（在我的例子中是div的UA样式表）中获得它。

我希望div能够以第二种方式呈现 - 有没有办法让这种情况发生？如何渲染div，以及display: inline-block元素之间的间距来自何处？

更新：这可能是由Chrome渲染器与Meteor Blaze渲染引擎之间的奇怪交互引起的，除非在高度动态的网页上才会看到。

Answer 1

这是评估空格的结果。你可以抛出：

font-size: 0;

在父div上的

，这将消失。或者，调整标记以删除列表项之间的空格。