Question

我有一个基本HTML和CSS的简单场景，边界框测量值不会在宽度上加起来。

通过将列宽设置为324 px来获得预期结果，尽管320 px似乎是合适的。在下面的JSFiddle中，有一个属性值可以改变以查看预期的结果。所需的宽度。

预期结果（错误的属性值）

div.container div.column {
    width: 324px;
}

结果不佳（所需的属性值）

div.container div.column {
    width: 320px;
}

为什么我认为320 px应该是我的两个按钮的包含宽度：

320 px（列）= 155 px（按钮）+ 10px（保证金） + 155px（按钮）

我确信这个问题是我理解的，有人可以解释为什么会这样吗？

Answer 1

默认情况下，

<button>是内联块元素。这意味着空间（字面上的空间）会影响它的间距。

您可以将按钮设置为显示块并向左浮动以获得类似的结果：

div.container button {
    width: 155px;
    height: 155px;
    margin-right: 10px;
    display:block; float:left;
}

你还需要清除行中的浮动：

div.container div.row:after {
    clear:both;
    display:table;
    content:'';
}

Answer 2

因为两个<button>标签位于不同的行上，所以它会尝试在两个项目之间添加某种白色间距。如果你把它们放在一条线上就行了。

<div class="row">
   <button></button><button></button>
</div>

浏览器压缩多个空格字符（包括换行符）渲染时到单个空间。唯一的例外是内部元素或具有CSS属性white-space：pre set的元素。（要么在XHTML中，xml：space =“preserve”属性。）