Html 为什么 CSS 填充会增加元素的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4767010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does CSS padding increase size of element?
提问by Michael
I am trying to give my div and textarea some padding. When I do this, it increases the size of the element, instead of shrinking the content area inside of it. Is there any way to achieve what I am trying to do?
我想给我的 div 和 textarea 一些填充。当我这样做时，它会增加元素的大小，而不是缩小其内部的内容区域。有什么方法可以实现我想要做的事情吗？
回答by Erenor Paz
You could add box-sizing:border-boxto the container element, to be able to specify a width and height that don't vary when you add padding and/or border to the element.
您可以添加box-sizing:border-box到容器元素，以便能够指定在向元素添加填充和/或边框时不会改变的宽度和高度。
See here (MDN)for specifications.
有关规范，请参见此处 (MDN)。
Update (copied comment to answer)
更新（复制评论回答）
Right now, the value border-boxis supported in all major browsers, according to MDN Specs
border-box根据MDN 规范，现在所有主要浏览器都支持该值
Some browsers of course requires proper prefix i.e. -webkitand -mozas you can clearly see here
某些浏览器当然需要适当的前缀 ie -webkit，-moz正如您在此处可以清楚地看到的那样
回答by Salman A
According to CSS2 specs, the rendered width of a box type element is equal to the sum of its width, left/right border and left/right padding (left/right margin comes into play as well). If your box has a width of '100%' and also has margin, border and padding, they will affect (increase) the width occupied by the object.
根据CSS2 规范，框类型元素的渲染宽度等于其宽度、左/右边框和左/右内边距（左/右外边距也起作用）的总和。如果您的框的宽度为“100%”并且还有边距、边框和内边距，它们将影响（增加）对象占用的宽度。
So, if your textarea needs to be 100% wide, assign values to width, margin-left/right, border-left/right and padding-left/right in such a way that their sum equals 100%.
因此，如果您的 textarea 需要 100% 宽，请为 width、margin-left/right、border-left/right 和 padding-left/right 赋值，使它们的总和等于 100%。
In CSS3 we have three box-sizing models. You can use border-boxmodel:
在 CSS3 中，我们有三个盒子大小模型。您可以使用border-box模型：
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width' and ‘height' properties.
此元素上指定的宽度和高度（以及相应的最小/最大属性）决定了元素的边框。也就是说，元素上指定的任何填充或边框都在此指定的宽度和高度内布置和绘制。内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。
回答by techexpert
This was a mess on W3C part and various browsers only added to this complexity with their own versions of box models. Personally, instead of thinking which browser or CSS setting will do the trick I just wrap the box' content in yet another DIV statement and use margins on that DIV, instead of using padding, like this:
这在 W3C 部分是一团糟，各种浏览器只会通过他们自己的盒模型版本增加这种复杂性。就我个人而言，与其考虑哪个浏览器或 CSS 设置会起作用，我只是将框的内容包装在另一个 DIV 语句中，并在该 DIV 上使用边距，而不是使用填充，如下所示：
<div id="container" style="width: 300px; border: 10px solid red;">
<div id="content" style="width: 250px; margin: 25px;">
Some content
</div>
</div>
Although this only works for fixed size containers
虽然这只适用于固定大小的容器
回答by cherouvim
It depends on the browser and it's implementation of the box model. What you are experiencing is the correct behavior.
这取决于浏览器及其盒模型的实现。您所经历的是正确的行为。
IE traditionally got it wrong: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
IE 传统上是错误的：http: //en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
回答by man
For a more cross-browser solution, you can avoid this behavior, by wrapping whatever tag that needs padding into another tag with fixed width, and giving it width:auto. This way, if the parent has a width of x, and you add padding to the child, the child will inherit the full width of x, applying the padding correctly without modifying the parent width or its own.
对于更跨浏览器的解决方案，您可以通过将需要填充的任何标签包装到另一个具有固定宽度的标签中，并为其指定宽度：自动来避免这种行为。这样，如果父级的宽度为 x，并且您向子级添加填充，则子级将继承 x 的完整宽度，正确应用填充而不修改父级宽度或它自己的宽度。
回答by Tobi
A divby default takes the width of its parent container, so to avoid browser compatibility issues, you could add a child divin the specified divthen add the required padding to the child div.
一个DIV在默认情况下需要它的父容器的宽度，这样可避免浏览器兼容性问题，您可以添加一个孩子的div指定的div则需要填补添加到孩子的div。
N.B- don't specify width to the child div because it would increase if you add padding
注意- 不要为子 div 指定宽度，因为如果添加填充它会增加
