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

Question

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

原文由 Michael 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

有关规范，请参见 此处 (MDN) 。

更新（复制评论回答）

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

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

原文由 Erenor Paz 发布，翻译遵循 CC BY-SA 3.0 许可协议