为什么具有相同字体大小、行高、填充和高度的文本区域和输入文本的垂直对齐方式不同？

Question

问题 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>

Answer 1

您可以删除输入的行高，因为它对其没有影响。

此外，您的文本区域的行高应与高度相同，以重现与输入相同的效果。

.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>

为什么具有相同字体大小、行高、填充和高度的文本区域和输入文本的垂直对齐方式不同？

Why textarea and input text with same font-size, line-height, padding and height are vertically aligned differently?

html

css

textarea

input

vertical-alignment