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

我想给我的div和textarea一些填充。当我这样做时，它会增加元素的大小，而不是缩小其内容区域。有什么办法可以实现我想要做的事情吗？为什么CSS填充增加了元素的大小？

感谢您的帮助！

2011-01-22 Michael

什么浏览器（S）您使用的测试增加吗？ – 2011-01-22 09:03:17

+19

将`* {box-sizing：border-box;}`添加到您的样式表中，并且大小将按照您的预期行事。 Paul Irish确认它对所有现代浏览器都是安全的：http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – 2013-08-20 18:23:08

这取决于浏览器和它的实现box model。你正在经历的是正确的行为。

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

来源

2011-01-22 09:03:48 cherouvim

+11

“错误”与W3C提出的不同，但远远不够因为更直观/更容易工作。 – pbz 2011-03-15 04:34:27

根据CSS2 specs，箱式元件的呈现宽度等于其宽度的总和，左/右边缘和左/右填充（左/右边缘也发挥作用）。如果您的框的宽度为“100％”并且具有边距，边框和填充，则它们会影响（增加）该对象占用的宽度。

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

在CSS3中我们有three box-sizing models。可以使用border-box模型：

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

来源

2011-01-22 09:07:53

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

虽然这只适用于固定尺寸的容器

来源

2012-05-19 03:28:41 techexpert

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

查看here (MDN)的规格。

更新（复制评论接听）

眼下，价值border-box所有主流浏览器支持，根据MDN Specs

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

来源

2013-08-20 13:15:12

对于更多的跨浏览器解决方案，就可以避免这种情况，通过包装，需要填充到固定宽度的另一个标记任何标记，并给予它的宽度：汽车。这样，如果父项的宽度为x，并且向子项添加填充，则子项将继承x的全部宽度，正确应用填充而不修改父宽度或它自己的宽度。

来源

2013-12-22 13:41:43 man

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

N.B - 不指定宽度孩子DIV因为它会如果添加填充

来源

2017-10-03 14:19:43 Tobi

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

回答

相关问题