为什么CSS填充增加元素的大小？ [英] Why does CSS padding increase size of element?

问题描述

我想给我的div和textarea一些填充。当我这样做，它包含的元素的大小，而不是收缩内部的内容区域。有什么方法可以实现我想要做的事吗？

I am trying to give my div and textarea some padding. When I do this, it increses the size of the element, instead of shrinking the content area inside of it. Is there any way to achieve what I am trying to do?

感谢您的帮助！

推荐答案

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

You could add box-sizing:border-box to the container element, to be able to specify a width and height that don't vary when you add padding and/or border to the element.

请参阅这里（MDN）的规格。

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

Update (copied comment to answer)

根据 border-box -sizing＃Browser_compatibilityrel =nofollow> MDN规范

Right now, the value border-box is supported in all major browsers, according to MDN Specs

一些浏览器当然需要正确的前缀， -webkit 和 -moz ，您可以清楚地看到此处

Some browsers of course requires proper prefix i.e. -webkit and -moz as you can clearly see here

这篇关于为什么CSS填充增加元素的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！