我正在尝试给我的 div 和 textarea 一些填充。当我这样做时，它会增加元素的大小，而不是缩小其中的内容区域。有什么方法可以实现我想要做的吗？
【问题讨论】：
* {box-sizing: border-box;} 添加到您的样式表中，大小将按照您的预期进行。 Paul Irish 确认它对所有现代浏览器都是安全的：paulirish.com/2012/box-sizing-border-box-ftw
这取决于浏览器和box model 的实现。您遇到的是正确的行为。
IE 传统上弄错了：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
【讨论】：
根据CSS2 specs，box 类型元素的渲染宽度等于其宽度、左/右边框和左/右填充（左/右外边距也起作用）的总和。如果您的框的宽度为“100%”并且还具有边距、边框和内边距，它们将影响（增加）对象占用的宽度。
因此，如果您的 textarea 需要 100% 宽，请为 width、margin-left/right、border-left/right 和 padding-left/right 分配值，使它们的总和等于 100%。
在 CSS3 中，我们有 three box-sizing models。你可以使用border-box模型：
指定的宽度和高度（以及相应的最小/最大属性） 这个元素决定了元素的边框。也就是说，任何 布局和绘制元素上指定的填充或边框 在这个指定的宽度和高度内。内容的宽度和高度 通过减去边框和填充宽度来计算 指定“宽度”和“高度”属性的相应边。
【讨论】：
这在 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>
虽然这只适用于固定大小的容器
【讨论】：
您可以将box-sizing:border-box 添加到容器元素，以便能够指定在向元素添加填充和/或边框时不会改变的宽度和高度。
有关规格，请参阅here (MDN)。
更新（复制评论以回答）
目前，根据MDN Specs，所有主流浏览器都支持border-box值
某些浏览器当然需要适当的前缀，即-webkit 和-moz，您可以清楚地看到here
对于更跨浏览器的解决方案，您可以通过将需要填充的任何标签包装到另一个具有固定宽度的标签中，并赋予它 width:auto 来避免这种行为。这样，如果父级的宽度为 x，并且您向子级添加填充，子级将继承 x 的完整宽度，从而正确应用填充，而无需修改父级宽度或其自身的宽度。
【讨论】：
div默认采用其父容器的宽度，因此为避免浏览器兼容性问题，您可以在指定的div子div /em> 然后将所需的填充添加到 child div。
注意 - 不要为子 div 指定宽度，因为如果添加填充，宽度会增加
【讨论】：