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

【问题标题】：Why textarea and input text with same font-size, line-height, padding and height are vertically aligned differently?为什么具有相同字体大小、行高、填充和高度的文本区域和输入文本垂直对齐方式不同？
【发布时间】：2019-05-27 14:15:34
【问题描述】：

问题 1：

如果font-size、line-height、height、padding 相同，为什么以下textarea 和文本input 具有不同的垂直文本对齐方式？

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

【问题讨论】：

值得注意的是textarea是多行文本，而input是单行
我同意。这大概就是造成差异的原因。但是我仍然想知道当它们都只有 1 行时如何将它们设置为相同的样式。谢谢！
移除高度值并开始增加 line-height 直到例如 34px （因为它是一行，所以 line-height 大没有问题）

标签： html css input textarea vertical-alignment

【解决方案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>

【讨论】：