textarea unexplained spacing

user_8010265 0
Viewed 565

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>

here is an image of it

textarea css html
4 Answers

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>

user_28020400

add this style to textarea

vertical-align: top
user_59607420

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>

user_86828730

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.

span,
textarea {
  border: 1px solid black;
  margin: 0;
  padding: 0;
}
textarea{
  vertical-align:top;
}
<textarea></textarea>
<span>test</span>

Admin1
Related