Google Chrome 开发工具：填充与边距答案

【问题标题】：Google Chrome Dev Tools: Padding vs MarginGoogle Chrome 开发工具：填充与边距
【发布时间】：2016-11-02 21:27:28
【问题描述】：

有人可以解释为什么填充和边距会使 Google Chrome 开发工具报告不同的内容宽度。

这是一个例子：

HTML

<div class="box">
</div>

CSS：

// Dev Tools reports the DIV has a width of 320px
.box {
  padding: 10px;
}

// BUT here Dev Tools reports the DIV has a width of 300px
.box {
  margin: 10px;
}

【问题讨论】：

标签： html css google-chrome-devtools

【解决方案1】：

在盒子模型中，宽度的计算方式有两种：

border-box（计算包括border和padding）
content-box（计算不包括border和padding，默认）

如果是border-box，那么padding 和border 的值将与width 和height 相加两次。

_{（来源：binvisions.com）}

margin 永远不会包含在width 的计算中。就是这个原因。

【讨论】：

【解决方案2】：

在 div 框外添加边距。这意味着，如果您有一个宽度为 300 像素且边距为 10 像素的 div 框，那么您的 div 框的宽度将是 300 像素，并且会在其周围留出 10 像素的空间。

然而，在 div 框内添加了填充。这意味着，如果您有一个 300px 的 div 框和 10px 的 padding，则 10px 的空间将被添加到 div 框内（水平和垂直）。因此 div 的总宽度为 300px + 10px(right) + 10px(left) = 320px。div box 内的内容只能占据 300px 的宽度，在 div 内周围留出 10px 的间距。

【讨论】：