html - 边距、边框、填充和大小未按预期相加

Question

我有一个基本 HTML 和 CSS 的简单场景，其中边界框测量不会在宽度方向上相加。

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

预期结果(错误的属性值)

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

错误的结果(期望的属性值)

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

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

320 像素(列)= 155 像素(按钮)+ 10px (边距) + 155px (按钮)

我确定问题出在我的理解上，谁能解释为什么会这样？

Answer 1

<button> s 默认是行内 block 元素。这意味着空间(字面意思是空间)会影响它的间距。

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

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

您还需要清除行中的 float :

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

http://jsfiddle.net/4mWqL/2/