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

81

我想给我的div和textarea一些填充。当我这样做时，它将增加元素的大小，而不是缩小元素内部的内容区域。有什么方法可以实现我的目标？

html css

— 麦可
source

您正在使用哪些浏览器进行测试？

— 彼得·泰勒

26

将其添加* {box-sizing: border-box;}到样式表中，大小将按您期望的方式运行。保罗·爱尔兰（Paul Irish）确认它对所有现代浏览器都是安全的：paulirish.com/2012/box-sizing-border-box-ftw

— Ross Allen

72

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

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

更新（已复制评论以回答）

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

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

— Erenor Paz
source

5

眼下，该值border-box是支持所有主流浏览器，根据MDN功能-当然，某些浏览器需要适当的前缀，即-webkit和-moz，你可以清楚地看到这里

— Erenor拉巴斯

就是这个！最后一个解决方案！

— 71GA

20

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

因此，如果您的textarea需要为100％宽，则应将width，margin-left / right，border-left / right和padding-left / right的值分配为等于100％的值。

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

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

— 萨尔曼A
source

4

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>

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

— 技术专家
source

3

它取决于浏览器及其box模型的实现。您遇到的是正确的行为。

IE传统上会把它弄错：http : //en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

— 切洛维姆
source

13

“错误”与W3C提出的不同，但就更直观/更容易使用而言，是正确的。

— pbz 2011年

8

@pbz：您很可能是对的。但是要遵循规范以避免混乱，这正是IE造成的。

— cherouvim 2011年

1

@cherouvim不，W3C是CSS盒子模型混乱的唯一原因。感谢IE在这一点上坚持不懈，否则我们仍然会停留在荒谬的W3C盒子模型上。

— 不言而喻'18 / 11/29

0

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

— 人
source

0

一个DIV在默认情况下需要它的父容器的宽度，这样可避免浏览器兼容性问题，您可以添加一个孩子的div指定的div则需要填补添加到孩子的div。

注意：请勿为子div指定宽度，因为如果添加填充，宽度会增加

— 托比
source