Question

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

感谢您的帮助！

Answer 1

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

有关规格，请参阅here (MDN)。

更新（复制评论以回答）

目前，根据MDN Specs

，所有主流浏览器均支持值border-box

某些浏览器当然需要正确的前缀，即-webkit和-moz，因为您可以清楚地看到here

Answer 2

根据CSS2 specs，框类型元素的渲染宽度等于其宽度，左/右边框和左/右边距的总和（左/右边距也起作用）。如果你的盒子宽度为'100％'并且还有边距，边框和填充，它们会影响（增加）对象占用的宽度。

因此，如果您的textarea需要100％宽，请将值指定为width，margin-left / right，border-left / right和padding-left / right，使得它们的总和等于100％。

在CSS3中，我们有three box-sizing models。您可以使用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

这取决于浏览器及其box model的实现。你所经历的是正确的行为。

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

Answer 5

对于更多的跨浏览器解决方案，您可以通过将需要填充的任何标记包装到具有固定宽度的另一个标记中并将其宽度：auto来避免此行为。这样，如果父级的宽度为x，并且您向子级添加了填充，则子级将继承x的整个宽度，正确应用填充而不修改父级宽度或自己的宽度。

Answer 6

div 默认采用其父容器的宽度，因此为避免浏览器兼容性问题，您可以在指定的 div <中添加子div / em>然后将所需的填充添加到子div 。

N.B - 不要为子div指定宽度，因为如果添加填充，它会增加

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

6 个答案: