边距、边框、填充和大小未按预期相加答案

【问题标题】：Margin, border, padding and size don't add up as expected边距、边框、填充和大小未按预期相加
【发布时间】：2014-02-28 06:21:31
【问题描述】：

我有一个简单的基本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 (按钮）

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

因为两个<button> 标签在不同的行上，它试图在两个项目之间添加某种空白。如果你把它们放在一行上，它就可以工作。

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

浏览器会压缩多个空白字符（包括换行符）渲染时到单个空间。唯一的例外是在元素或具有 CSS 属性 white-space: 预设的元素。（或者在 XHTML 中，xml:space="preserve" 属性。）

【讨论】：