Why does CSS padding increase size of element?

Solution 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

Solution 2:

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.

Solution 3:

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

Solution 4:

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