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.

This is my HTML code:

<div id="body">     <textarea id="editor"></textarea> </div> 

And my CSS code:

#body {     height:100%;     width:100%;     display:block; }  #editor {     height:100%;     width:100%;     display:block;     padding-left:350px;     padding-right:350px; } 

However, the padding values do not appear to work as one would expect. The width of the textarea is increased by 350px in both directions, rather than defining space between the borders of the element and its content.

I've considered just centering the textarea by setting the margins at "0px auto", but I would like the user to still be able to scroll through the textarea if the mouse is hovering over one of the empty margins. For the same reason I can't add another div to act as a wrapper, as the user wouldn't be able to scroll along the empty areas but only along the margin-less textarea.

Can anybody help?

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.

Answer 2

Specifying widths and margins/padding in '%' helps. Here is one example -

Live @ http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body {   background-color:#ccc;   height:100%;   width:100%;   display:block; }  textarea#editor {   border:none;   width:80%;   height:100%;   margin-left:10%;   margin-right:10%; }