Question

我正在尝试通过在像素中指定CSS属性值来精确布局我的页面。然而，在我试图限制平铺显示器中每行的最大平铺数量的一个实例中，我发现我的计算是由一个令人费解的，未知的（对我而言）因素来解决。

以下两个小提琴说明了我的问题：

Good fiddle：左列每行最多显示两个图块。但我不明白为什么我的容器的max-width属性必须大于内容切片的margin + border + padding + width之和。
Bad fiddle：我没有得到我想要的每行2个瓦片输出，尽管我指出了我认为精确计算内容和容器元素的盒子模型属性。

我的计算中缺少什么？为什么内部图块的margin + border + padding + width没有与容器的max-width完全相加？

Answer 1

HTML中很自然，它在元素之间放置了一些空格，就像在单词中一样。你可以改变你的html代码（带有'col-1-tile'的部分），看起来像这样：

<div class="inline-block col-1-tile">A</div><div class="inline-block col-1-tile">B</div><div class="inline-block col-1-tile">C</div>

或者您可以尝试将这些元素的font-size更改为0px。两者都可以解决问题。有关该主题的更多信息here或here