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

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

在框模型中,宽度以两种方式计算:

1. border-box(计算包括border和padding)
2. 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.这就是原因.