How to remove few pixels of whitespace underneath textarea?

Question

Whenever I have a wrapper for a textarea, the textarea's height does not match the textarea's height. There's a few pixels of margin at the bottom. Why does this happen and how do I fix it?

E.g.:

<div>
    <textarea></textarea>
</div>

The div will be a few pixels taller than the textarea.

Here's a fiddle: http://jsfiddle.net/0dgjqp3b/

I don't want to explicitly set the height of the parent. The parent should wrap around the textarea even if the textarea resizes.

Answer 1

It's because the textarea element's display is inline-block by default. As a result, its vertical-align property is set to baseline (which is why it isn't aligned as you would expect). The reason there is reserved space at the bottom is for letters such as 'y' or 'j', which hang below adjacent letters/elements.

To resolve this, you can either change the vertical-align property value to something like top, or you could change the display of the textarea to block:

Updated Example

textarea {
  vertical-align: top;
}

Updated Example

textarea {
  display: block;
}

Answer 2

Add display:block to the textarea element.

div {
  border: 1px solid red;
}
textarea {
  margin: 0;
  padding: 0;
  display: block;
}

<div>
  <textarea></textarea>
</div>

Jsfiddle

Answer 3

Add display:block; to the textarea

div {
  border: 1px solid red;
}
textarea {
  margin: 0;
  padding: 0;
  display: block;
}

<div>
  <textarea></textarea>
</div>

Answer 4

My answer uses much of the code in the previous answers but with one new addition.

div{border:1px solid red;display:table;vertical-align:middle;}
textarea{margin:0;padding:0;vertical-align:middle;}

<div>
    <textarea></textarea>
</div>

Let me know if there is anything else I can do.