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

Some browsers allow you to target the placeholder for changing the color etc., so you can add padding as well:

::-webkit-input-placeholder { /* WebKit browsers */
    padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    padding: 5px 0 0 5px;
}

Answer 2

The width specified by CSS does not include padding or border (in accordance with W3C specifications). I guess one way of doing it is with some JavaScript that sets the width of #editor to the width of #body minus 700px, but that's a bit messy... Not sure if there's a CSS way of doing what you want here. Of course, you could use margin then register the onMouseWheel event to the #body and work with that...

Answer 3

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 4

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%;
}