为什么textarea和具有相同字体大小,行高,填充和高度的输入文本在垂直方向上有不同的对齐方式?

时间:2019-05-27 14:15:34

标签: html css input textarea vertical-alignment

enter image description here

问题1:

如果以下两个textarea和文本input具有相同的font-sizeline-height,{ {1}},height

问题1.1

如何使paddingtextarea具有相同的垂直对齐方式?

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;
}

1 个答案:

答案 0 :(得分:1)

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

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

gcc
.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;
}