html - Why does CSS padding increase size of element?

Question

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?

Answer 1

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