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?

Extravagant

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.

Frediafredie

Interesting. Hard to believe this only became possible with CSS3. Anyway, it works. Thanks! – Heft

nice one. here is the code for FF/Safari: -moz-box-sizing:border-box; /* Firefox / -webkit-box-sizing:border-box; / Safari */ – Aricaarick

Note: box-sizing should be specified on parent, not the textarea. – Bankroll

nice... input too work.. only select not work... its ok... thanks! – Clerkly

Works with divs and most other elements. Doesn't work with a textarea. – Macronucleus

finally know what this does – Logbook

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

Rosin

It does NOT help when you wish to do PADDING inside an textarea. – Hershey

Answer 3

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...

Goggin

Answer 4

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

Cumber

Answer 5

Just add a simple border:

border-bottom: 1em solid white;

Feel free to use the desired color and size. You could also use border-top, border-left, border-right or just use border. To make it act like padding, just make sure that you add the same color as the background-color

.parent, textarea{
  width:100%;
}

.parent{
  display:flex;
}

textarea{
  border:1em solid black;
}

<div class='parent'>
  <textarea rows="5"></textarea>
</div>

Eindhoven