Menu
I am trying to give my div and textarea some padding. When I do this, it increases 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?
909
Now, because of the way the box sizing works in CSS, adding the padding to your element will add to its dimensions, since the width of the padding area will be added to the width of the content area, and so the total width (and height) of the element will increase.
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following. This tells the browser to account for any border and padding in the values you specify for an element's width and height.
The box model of an element in CSS—includes the content, padding, border, and margin areas. Any padding added to the element will increase the total computed height of the element, so you may not always end up with the expected height using just the height property if you also add padding to your element.
An element's padding area is the space between its content and its border. Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.
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.
See here (MDN) for specifications.
Update (copied comment to answer)
Right now, the value border-box is supported in all major browsers, according to MDN Specs
Some browsers of course requires proper prefix i.e. -webkit and -moz as you can clearly see here
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
