当我发现大小为200英尺的<div>变为220px宽时，如果给它10px填充，我感到非常惊讶。这对我来说没有任何意义，外部尺寸不应该在内部设置时改变。每次调整填充时，它都会强制您调整大小。
我做错了什么，或者是否有这种行为的原因？
编辑：我知道这是应该如何工作的，我的问题是为什么？这是我不理解的合乎逻辑的方式吗？这是否比使保持大小和填充分开的相反方法有任何优势？答案 0 :(得分：55)
有两种不同的所谓“盒子模型”，一种是将填充（和边框）添加到指定的width，而另一种则不是。随着CSS3的出现，你可以幸运地在两个模型之间切换。更准确地说，您正在寻找的行为可以通过指定
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 200px;
编辑：对为什么传统的盒子模型实际编辑你的编辑，实际上是维基百科offers some insight：
在HTML 4和CSS之前，很少有HTML元素支持边框和填充，因此元素的宽度和高度的定义不是很有争议。但是，它根据元素而变化。表的HTML宽度属性定义了表的宽度，包括其边框。另一方面，图像的HTML宽度属性定义了图像本身的宽度（在任何边框内）。早期支持填充的唯一因素是表格单元格。单元格的宽度定义为“单元格内容的建议宽度，以像素为单位，不包括单元格填充。”
CSS为更多元素引入了边距，边框和填充。它采用了与内容，边框，边距和填充相关的定义宽度，类似于表格单元格。这已被称为W3C盒子模型。
答案 1 :(得分：5)
之所以如此，从技术上讲，元素的宽度应该适用于内容，而不是容器。
根据CSS1规范，由万维网联盟（W3C）于1996年发布并于1999年修订，当为任何块级元素明确指定宽度或高度时，它应仅确定宽度或高度可见元素，后面应用填充，边框和边距。
More info about this behavior *
*免责声明：是的，这是我自己的博客，我认为我做了解释盒子模型的全面工作，所以我把它作为参考。
答案 2 :(得分：4)
填充假设是对象的给定宽度的补充。
请参阅CSS 2.1 specification for box model。
虽然您可以将填充视为内部属性或外部属性，但事实是根据当前规范，它是外部属性。据我所知，它是两者之间的选择，同样有效的选择。
我还没有读过box-model属性，但假设alex是正确的，那么将来你可以在两种解释填充的方式之间做出选择。
答案 3 :(得分：0)
如果填充尺寸增加，则按预期工作。在破旧的盒子模型（如旧的Internet Explorer版本）的浏览器中，div将是100像素宽，但这是对CSS的错误处理。
答案 4 :(得分：0)
如果框模型不以这种方式工作，您将如何处理图像周围的填充？您是否希望带有填充的img元素的大小与图像的像素尺寸不匹配？或者填充覆盖图像？
最好的默认行为是容器的宽度不受填充或边距值的影响。
答案 5 :(得分：0)
如果您的盒子在盒子内，请移除内盒的宽度（带有填充的盒子），它将解决问题。
答案 6 :(得分：-3)
“”如果盒子模型不能以这种方式工作，你将如何处理图像周围的填充？您是否希望带有填充的img元素的大小与图像的像素尺寸不匹配？或者填充覆盖图像？“”
首先，任何优秀的Web开发人员都知道将图像放入不适合的容器中会更好。即开发101.如果填充不允许图像，则应更改图像或填充。纯粹而简单。所以上面提到的论点是错误的。
填充是一个内部设置，位于容器边界的内部。因此，当某个容器位于该容器内部并且您增加容器的填充时，该容器内的项目应该编码，以便可以减小其大小。
“填充”一词本身就说明了一切。你能想象如果UPS在他们的盒子里添加填充物来保护里面的内容，却发现盒子的大小增加了！一丝不苟吧？当然如此！填充意味着在容器内部周围增加空间，而不会使容器破裂并在高度或宽度上扩展。
像mozilla，gecko和opera这样的浏览器破坏了盒子模型，而不是IE。 “consordium”实现的盒子模型充其量是错误的，并且会对网络开发者造成严重破坏。
如果“consordium”实现了与IE相同的盒子模型，那么开发人员可以更轻松地使用我们的网页列。我认为你必须同意我的观点。简单明了。
我厌倦了人们说IE是劣等的。我可以提供大量的IE保持强大的例子，而像Firefox这样的便宜的浏览器在压力下破解。
我的两分钱。如果你愿意，就恨我，但我说的是常识而不是别的。