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

我想给我的div和textarea一些填充。 当我这样做时，它会增加元素的大小，而不是缩小它内部的区域。 有什么办法来实现我想要做的？

谢谢你的帮助！

Answer 1

你可以添加box-sizing:border-box到容器元素，以便能够指定在添加填充和/或边界到元素时不会改变的宽度和高度。

有关规格，请参阅此处（MDN） 。

更新（复制评论以回答）

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

有些浏览器当然需要正确的前缀，如-webkit和-moz ，你可以在这里清楚地看到

Answer 2

根据CSS2规范 ，boxtypes元素的渲染宽度等于其宽度，左/右边界和左/右填充的总和（左/右边距也起作用）。 如果您的框的宽度为“100％”并且具有边距，边框和填充，则会影响（增加）对象占用的宽度。

所以，如果你的textarea需要100％的宽度，分配值的宽度，边界左/右，边界左/右和填充左/右这样的方式，他们的总和等于100％。

---

在CSS3中我们有三个盒子大小的模型 。 您可以使用border-box模型：

此元素上指定的宽度和高度（以及相应的最小/最大属性）确定元素的边框。 也就是说，在元素上指定的任何填充或边框都是在此指定的宽度和高度内绘制和绘制的。 内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。

Answer 3

这在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> 

虽然这只适用于固定大小的容器

Answer 4

这取决于浏览器和盒子模型的实现。 你正在经历的是正确的行为。

IE传统上是错的： http : //en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 5

对于更多的跨浏览器的解决scheme，可以通过将需要填充的标记封装到具有固定宽度的另一个标记中，并将宽度设置为auto：auto来避免此行为。 这样，如果父项的宽度为x，并且向子项添加填充，则子项将inheritancex的全部宽度，正确应用填充而不修改父宽度或其自身。

Answer 6

默认情况下div使用其父容器的宽度，所以为了避免浏览器兼容性问题，可以在指定的div中添加一个子div ，然后将所需的填充添加到子div 。

注意 – 不要给子div指定宽度，因为如果你添加填充它会增加