How can I add padding to a textarea without causing the width to increase?

Question

I\'ve been having trouble setting a textarea element\'s width and using padding via CSS. The padding value seems to change the width of the textarea, which I\'d rather it not do

Answer 1

The CSS box model defines "width" as the width of the content, excluding border, padding and margin.

Fortunately, CSS3 has a new box-sizing property that lets you modify this behaviour to instead include padding etc. in the specified width using:

box-sizing: border-box;

According to the link above, most modern browsers (including IE >= 8) support this property, but they have different names in each browser.