Why does CSS padding increase size of element?

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?

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

According to CSS2 specs, the rendered width of a box type element is equal to the sum of its width, left/right border and left/right padding (left/right margin comes into play as well). If your box has a width of '100%' and also has margin, border and padding, they will affect (increase) the width occupied by the object.

So, if your textarea needs to be 100% wide, assign values to width, margin-left/right, border-left/right and padding-left/right in such a way that their sum equals 100%.

---

In CSS3 we have three box-sizing models. You can use border-box model:

> The specified width and height (and respective min/max properties) on > this element determine the border box of the element. That is, any > padding or border specified on the element is laid out and drawn > inside this specified width and height. The content width and height > are calculated by subtracting the border and padding widths of the > respective sides from the specified ‘width’ and ‘height’ properties.

This was a mess on W3C part and various browsers only added to this complexity with their own versions of box models. Personally, instead of thinking which browser or CSS setting will do the trick I just wrap the box' content in yet another DIV statement and use margins on that DIV, instead of using padding, like this:

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

Although this only works for fixed size containers

It depends on the browser and it's implementation of the box model. What you are experiencing is the correct behavior.

IE traditionally got it wrong: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

For a more cross-browser solution, you can avoid this behavior, by wrapping whatever tag that needs padding into another tag with fixed width, and giving it width:auto. This way, if the parent has a width of x, and you add padding to the child, the child will inherit the full width of x, applying the padding correctly without modifying the parent width or its own.

A div by default takes the width of its parent container, so to avoid browser compatibility issues, you could add a child div in the specified div then add the required padding to the child div.

N.B - don't specify width to the child div because it would increase if you add padding