为什么CSS填充会增加元素的大小？

Question

我试图给我的div和textarea一些填充.当我这样做时,它会增加元素的大小,而不是缩小其内部的内容区域.有没有办法实现我想做的事情？

谢谢你的帮助!

Answer 1

您可以添加box-sizing:border-box到容器元素,以便能够指定在向元素添加填充和/或边框时不会发生变化的宽度和高度.

有关规格,请参见此处(MDN).

更新(复制评论回答)

border-box根据MDN规范,目前所有主流浏览器都支持该值

有些浏览器当然需要正确的前缀-webkit,-moz因为你可以清楚地看到这里

根据[MDN Specs](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Browser_compatibility),现在所有主流浏览器都支持值'border-box` - 某些浏览器当然需要正确的前缀,即`-webkit`和`-moz`,因为你可以清楚地看到[这里](https://developer.mozilla.org/en-US/docs/Web/CSS/box-上浆#示例) (4认同)

Answer 2

根据CSS2规范,框类型元素的渲染宽度等于其宽度,左/右边框和左/右边距的总和(左/右边距也起作用).如果您的框的宽度为"100%"并且还有边距,边框和填充,它们将影响(增加)对象占用的宽度.

因此,如果您的textarea需要100%宽,请将值分配给width,margin-left/right,border-left/right和padding-left/right,使得它们的总和等于100%.

在CSS3中,我们有三个盒子大小模型.你可以使用border-box模型:

此元素上指定的宽度和高度(以及相应的最小/最大属性)确定元素的边框.也就是说,元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制.通过从指定的"宽度"和"高度"属性中减去相应边的边框和填充宽度来计算内容宽度和高度.

Answer 3

这取决于浏览器及其盒模型的实现。您所经历的是正确的行为。