Extra Space Under Textarea, Differs Along Browsers

Extra space under textarea, differs along browsers

Add vertical-align: top to textarea.

The reason for the gap is that textarea is an inline (or inline-block) element, and the gap is the space reserved for descenders in text. I don't know exactly why the gap is different between different browsers.

Extra padding under text area

To have cross browser no white space below textarea/input fields use:

textarea,
input,
select {
  margin: 0;
  vertical-align: bottom;
}

(tested in your fiddle, works)

Oddly the vertical align is the key here.

Just a note, you don't need the margin:0 because you already have *{margin:0}.
For an even more complete cross browser experience for textarea you could also use overflow:auto; for IE and resize:none; for browsers with resizing support.

Some more info about why it works like it works:
Mystery white space underneath image tag

How to get rid of gap between textarea's bottom and its wrapping div in chrome browser?

the trick was giving the textarea display: block; credits to yuxel

just a note: css reset(yahoo's one) doesn't change textarea's display.

textarea unexplained spacing

Add

vertical-align:bottom

This is because

The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
^{MDN Reference}

span,
textarea {
  border: 1px solid black;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

<textarea></textarea>
<span>test</span>

Extra space is created when a button is placed directly below a text area

Change the display property on the textarea to block and they should line up without a gap in-between. In general when I have some HTML elements not lining-up properly, I play with the display property as it's usually the culprit.

Demo: http://jsfiddle.net/8kzpf/

How to remove extra space of a textarea inside a div in chrome?

Some browsers (including Chrome) have a default margin for form elements. Just set the margin to zero:

.textareashell textarea { margin: 0; }

Inconsistent textarea handling in browsers

To fix "the bottom margin for the textarea in Chrome", add vertical-align: top to #txtInput.

Live Demo

Now you have consistent rendering between the browsers you listed.

Do you want a solution for the textarea extending outside the container?

This fixes IE8, Firefox, Chrome, Safari, Opera. Doesn't help in IE7 though:

Live Demo

#txtInput
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Here, we're using the box-sizing property.

There's probably a way to get it exactly right in even IE7, but unless you really care about that browser, it's probably best to just live with it protruding ~3px outside the container in that browser.

Extra Space Under Textarea, Differs Along Browsers