Css 填充会增加元素的大小，这有什么原因吗？

当我发现一个大小为-200像素的

如果你给它10像素的填充，它会变成220像素宽时，我非常惊讶。这对我来说毫无意义，当内部设置改变时，外部大小不应该改变。它强制您在每次调整填充时调整大小

我是做错了什么，还是有这样的行为的原因

---

编辑：我知道这就是它的工作原理，我的问题是为什么？在某种程度上我不明白这是否合乎逻辑？与保持大小和填充分开的相反方法相比，这有什么优势吗？

填充被认为是在对象的给定宽度之外

参见css2.1

虽然确实可以将填充视为内部属性或外部属性，但事实是，根据当前规范，它是一个外部属性。据我所知，这是两个同样有效的选项之间的选择

---

我还没有读过关于盒子模型的属性，但是假设alex是对的，那么将来你可以在这两种解释填充的方法中进行选择。

如果大小随着填充的增加而增加，它就可以正常工作了。在旧版本的InternetExplorer等具有破盒模型的浏览器中，div将为100像素宽，但这是对CSS的错误处理

---

有两种不同的所谓“盒子模型”，一种是在指定的

宽度中添加填充（和边框），而另一种不是。随着CSS3的出现，您可以幸运地在这两种模型之间切换。更准确地说，可以通过指定

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 200px;

在div的CSS中。然后，在现代浏览器中，div将始终保持200 px宽，无论发生什么情况。有关更多详细信息和支持的浏览器列表，请参阅

Edit:WRT您的编辑关于为什么传统的盒子模型是这样，维基百科实际上：

在HTML4和CSS之前，很少有HTML元素同时支持边框和填充，因此元素的宽度和高度的定义不是很有争议。但是，它因元素而异。表格的HTML宽度属性定义了表格的宽度，包括其边框。另一方面，图像的HTML宽度属性定义了图像本身的宽度（在任何边框内）。早期唯一支持填充的元素是表单元格。单元格宽度定义为“单元格内容的建议宽度，以像素为单位，不包括单元格填充。”

CSS为更多元素引入了边距、边框和填充。它采用了与内容、边框、边距和填充相关的定义宽度，类似于表单元格的定义宽度。这被称为W3C盒子模型

之所以如此，是因为从技术上讲，元素的宽度应该应用于内容，而不是容器

根据1996年由万维网联盟（W3C）发布并于1999年修订的CSS1规范，当为任何块级元素明确指定宽度或高度时，它应仅确定可见元素的宽度或高度，随后应用填充、边框和边距

*

*免责声明：是的，这是我自己的博客，我想我对盒子模型做了详尽的解释，所以我把它作为参考。
如果盒子模型没有这样工作，你会如何处理图像周围的填充？是否希望带有填充的
img
元素的大小与图像的像素尺寸不匹配？或者填充物覆盖了图像

默认行为最好是容器的宽度不受填充或边距值的影响。
“如果长方体模型不是这样工作的，您将如何处理图像周围的填充？是否希望带填充的img元素的大小与图像的像素尺寸不匹配？或者填充物覆盖了图像？”

首先，任何一个优秀的web开发人员都知道，不要将图像放入不合适的容器中。这就是发展101。如果填充不允许图像，则应更改图像或填充。纯粹而简单。因此，上述论点是错误的

填充是一种内部设置，位于容器边界的内部。因此，当容器中有东西时，您增加了容器的填充，容器中的项目应该进行编码，以便可以减小大小

“填充”这个词本身就说明了一切。你能想象，如果UPS在他们的盒子里添加了填充物来保护里面的东西，结果却发现盒子变大了！太不可思议了，对吧？当然是！填充意味着在容器内部增加空间，而不会使容器在高度或宽度上断裂和膨胀

是像mozilla、gecko和opera这样的浏览器破坏了box模型，而不是IE。“consordium”实现的box模型充其量是有缺陷的，对web开发人员造成了严重破坏

如果“consordium”实现了与IE相同的盒子模型，那么我们开发人员就可以更轻松地处理我们网页的列了。我想在那一点上你必须同意我的意见。简单明了

我讨厌别人说我不如你。我可以举很多这样的例子：IE的强大，而像firefox这样的廉价浏览器在压力下崩溃

我的两分钱。如果你想恨我，那就恨我吧，但我说的只是常识而已。
如果你的盒子在盒子里，去掉里面盒子的宽度（带填充物的那一个），它会解决问题。
边距不应该是外部属性吗<代码>填充

对元素的外部部分没有任何作用。@kemp；如果查看规格中的长方体模型，您将