Почему текстовая область и вводимый текст с одинаковым размером шрифта, высотой строки, отступом и высотой по-разному выровнены по вертикали? - PullRequest
Новая
       37

Почему текстовая область и вводимый текст с одинаковым размером шрифта, высотой строки, отступом и высотой по-разному выровнены по вертикали?

1 голос
/ 27 мая 2019

enter image description here

ВОПРОС 1:

Почему следующие textarea и текст input имеют разныевертикальное выравнивание текста , если они оба имеют одинаковые font-size, line-height, height, padding?

ВОПРОС 1.1

Как можноЯ делаю textarea такое же вертикальное выравнивание, как и input? 

.myTextarea {
  display: block;
  font-family: Arial;
  font-size: 14px;
  line-height: 21px;
  height: 32px;
  padding: 2px 5px;

  resize: none;
}

.myInput {
  display: block;
  font-family: Arial;
  font-size: 14px;
  line-height: 21px;
  height: 32px;
  padding: 2px 5px;
}

.myDiv {
  margin-top: 20px;
  margin-bottom: 5px;
  font-weight: bold;
}
<div>
  <div class="myDiv">Textarea</div>
  <textarea class="myTextarea" rows="1">12345</textarea>
  <div class="myDiv">Input</div>
  <input class="myInput" type="text" value="12345"/>
</div>

1 Ответ

1 голос
/ 27 мая 2019

Вы можете удалить высоту строки на вашем входе, так как он не влияет на него.

Кроме того, у вас должна быть такая же высота строки, как и высота, чтобы текстовая область воспроизводила тот же эффект, что и вход. 

.myTextarea {
  display: block;
  font-family: Arial;
  font-size: 14px;
  line-height: 32px;
  height: 32px;
  padding: 2px 5px;

  resize: none;
}

.myInput {
  display: block;
  font-family: Arial;
  font-size: 14px;
  height: 32px;
  padding: 2px 5px;
}

.myDiv {
  margin-top: 20px;
  margin-bottom: 5px;
  font-weight: bold;
}
<div>
  <div class="myDiv">Textarea</div>
  <textarea class="myTextarea" rows="1">12345</textarea>
  <div class="myDiv">Input</div>
  <input class="myInput" type="text" value="12345"/>
</div>
...