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

有两种不同的所谓“框模型”,一种将填充(和边框)添加到指定的 width 而另一个没有。随着CSS3的出现,您可以幸运地在两种型号之间切换。更准确地说,可以通过指定

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

在你的部门的CSS中。然后,在现代浏览器中,无论什么,DIV都将保持200px的宽度。有关更多详细信息和支持的浏览器列表,请参阅 this guide .

编辑: 将您的编辑改为 为什么 传统的盒子模型是这样的,事实上,维基百科 offers some insight :

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

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

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

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

More info about this behavior *

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

填充为 想象上的 加在物体的给定宽度之外。

参见CSS 2.1 specification for box model .

虽然确实可以将填充视为内部属性或外部属性,但事实是,根据当前规范,填充是外部属性。据我所知,这是两种选择中同样有效的选择。

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

如果尺寸随着填充物的增加而增加,它就会按预期工作。在旧版本的Internet Explorer中,DIV的宽度为100像素,但这是对CSS的错误处理。

http://www.w3schools.com/css/css_boxmodel.asp

如果是盒子模型的话 不 这样做,如何处理图像周围的填充?你喜欢这个尺寸的吗 img 带填充的元素与图像的像素尺寸不匹配?或者填充物覆盖了图像?

默认行为最好是容器的宽度不受填充或边距值的影响。

如果你的盒子在一个盒子里,去掉里面盒子的宽度(有填充物的那个),它就会解决这个问题。

如果框模型不能这样工作,您将如何处理图像周围的填充?您是否希望带填充的img元素的大小与图像的像素尺寸不匹配?或者填充物覆盖了图像?

首先,任何一个优秀的Web开发人员都会比把一个图像放在一个不适合的容器中更清楚。这是发展101。如果填充不允许图像,则应更改图像或填充。纯粹而简单。所以上面提到的论点是错误的。

填充是一个内部设置,位于容器边界的内部。所以,当容器中有东西,并且增加容器的填充量时,容器中的项应该进行编码,这样可以减小大小。

“填充”这个词本身就说明了这一切。你能想象一下,如果UPS在盒子里加上填充物来保护里面的内容,结果发现盒子的大小会增加!荒谬,对吧?当然!填充是指在容器内部周围添加空间,而不使容器在高度或宽度上断裂和扩展。

像Mozilla、Gecko和Opera这样的浏览器破坏了盒子模型,而不是IE。“Conordium”实现的盒子模型充其量是有缺陷的,并且严重破坏了网络开发者。

如果“conordium”实现了与IE相同的框模型,那么开发人员使用我们的网页中的列会容易得多。我想在那一点上你必须同意我的看法。简单明了。

我对别人说我低人一等感到厌烦.我可以举出大量的例子来说明IE的强大性,而像火狐这样便宜的浏览器在压力下会崩溃。

我的两分钱。如果你想恨我,就恨我,但我说的是常识而不是别的。