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

Question

当我发现-比方说- 200px大小的<div>如果你给它10px填充的话，它的宽度会变成220px，这让我非常惊讶。这对我来说没有任何意义，当内部设置发生变化时，外部大小不应该改变。每次调整填充时，它都会强制调整大小。

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

编辑:我知道这应该是如何工作的，我的问题是为什么？这是不是在某种我不理解的逻辑上？与保持大小和填充分开的相反方法相比，这有什么优势吗？

Answer 1

有两种不同的所谓“框模型”，一种将填充(和边框)添加到指定的width，而另一种则不添加。随着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总是保持200px宽。有关更多详细信息和支持的浏览器列表，请参阅this guide。

维基百科编辑：你的编辑为什么传统的盒子模型是这样的，维基百科实际上offers some insight

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

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

Answer 2

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

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

More info about this behavior*

*免责声明:是的，这是我自己的博客，我想我已经做了彻底的工作来解释盒子模型，所以我把它作为参考。

Answer 3

Padding是指在给定对象宽度的基础上加上。

请参阅CSS2.1 specification for box model。

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

我还没有读过box-model属性，但是假设alex是对的，那么在将来，您将能够在两种解释填充的方法之间进行选择。