why extra space under textarea why not in input?

Asked Jul 01 '22 at 12:13

Active Jul 01 '22 at 12:44

Viewed 47 times

input and textarea both are vertical-align: baseline. but why extra space under textarea why not in input.

div{
  border:1px solid red;
  margin-bottom: 10px;
  max-width: 400px;
}
input,textarea{
  border-width: 1px;
  height: 30px
}
textarea{
  height: 70px;
}

<div>
  <input type="text" placeholder="Name">
</div>
<div>
  <input type="text" placeholder="Email">
</div>
<div>
  <textarea type="text" placeholder="message"></textarea>
</div>

edited Jul 01 '22 at 12:22

asked Jul 01 '22 at 12:13

code newbie

What do you mean with extra space? – Z0OM Jul 01 '22 at 12:18
run snippet and check under textarea space – code newbie Jul 01 '22 at 12:20
You mean the height sry i don't get it? – Z0OM Jul 01 '22 at 12:21
there is a space between the red border and the bottom of the textarea. – J4R Jul 01 '22 at 12:27
run code snippet and see under textarea approx 4px space in chrome browser. – code newbie Jul 01 '22 at 12:28
@J4R you are right – code newbie Jul 01 '22 at 12:31
the baseline for both elements aren't the same – Temani Afif Jul 01 '22 at 12:44
@TemaniAfif i did not understand . – code newbie Jul 01 '22 at 13:02
The baseline of a textarea is undefined. Chrome and Firefox differ completely on where it's considered to be. It's best not to try to make sense of it. Just follow the advice in the duplicates. – Alohci Jul 01 '22 at 17:27

why extra space under textarea why not in input?

0 Answers0