textarea unexplained spacing

Question

I have just noticed some wired spacing below a textarea, it is different in every browser. Can someone explain why it is there?

span,
textarea {
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

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

Answer 1

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>

Answer 2

The thing with textarea in HTML is that the text is aligned right next to the bottom margin. If you wish to have it any other way, read about the vertical-align attribute in CSS.

You can use:

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

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