填充是否会增加元素的大小？

我做错了什么,或者是否有这种行为的原因？

编辑:我知道这是应该如何工作,我的问题是为什么？这是我不理解的合乎逻辑的方式吗？这是否比使保持大小和填充分开的相反方法有任何优势？

有两种不同的所谓"盒子模型",一种是将填充(和边框)添加到指定的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总是保持200像素宽.有关更多详细信息和支持的浏览器列表,请参阅本指南.

编辑: WRT您的编辑,为什么传统的盒子模型是原样,维基百科实际上提供了一些见解:

在HTML 4和CSS之前,很少有HTML元素支持边框和填充,因此元素的宽度和高度的定义不是很有争议.但是,它根据元素而变化.表的HTML宽度属性定义了表的宽度,包括其边框.另一方面,图像的HTML宽度属性定义了图像本身的宽度(在任何边框内).早期支持填充的唯一因素是表格单元格.单元格的宽度定义为"除了单元格填充之外的单元格内容的建议宽度(以像素为单位)".

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

它之所以如此,从技术上讲,元素的宽度应该适用于内容,而不是容器.

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

有关此行为的更多信息*

*免责声明:是的,这是我自己的博客,我认为我做了解释盒子模型的全面工作,所以我把它作为参考.