Question

有人可以解释为什么填充和边距会使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;
}

Answer 1

在箱型号中，宽度以两种方式计算：

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

如果它是border-box，则padding和border的值将与width和height一起添加两次。

http://www.binvisions.com/wp-content/uploads/2011/09/css-box-model-border-content_590x328.jpg

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

Answer 2

在div框外添加了保证金。这意味着，如果你有一个宽度为300像素且边距为10像素的div框，你的div框的宽度将为300像素，并且将在其周围留下10px的空间。

然而，在div框内添加了填充。这意味着，如果你有一个300px的div框，填充为10px，那么10px空间将被添加到div框内（水平和垂直）。因此div的总宽度为300px + 10px（右）+ 10px（左）= 320px。div盒内的内容只占宽度的300px，div内部的间距为10px。

谷歌Chrome开发工具：填充与保证金

2 个答案: