CODEWITHSUNDEEP
htmlcsstextarea
mathias hansen
mathias hansen

Reputation: 81

textarea unexplained spacing

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

Upvotes: 4

Views: 968

Answers (4)

Yash Mittra
Yash Mittra

Reputation: 153

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>

Upvotes: 1

user8493027
user8493027

Reputation:

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>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 8

Adaleni
Adaleni

Reputation: 976

add this style to textarea

vertical-align: top

Upvotes: 0

Related Questions