带有 inline-block 子项的 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 上，这将消失。或者，调整您的标记以删除列表项之间的空间。