为何相同vertical-align设置下textarea底部有额外空白而input没有

这个底部额外空白的核心成因是行内替换元素的基线对齐规则差异，具体逻辑如下：

• input和textarea默认都是inline-block级别的替换元素，默认vertical-align属性值为baseline，会和父元素的文本基线对齐。块级父元素存在默认行高，会在文本基线下方预留出供g、p、y这类下行字母显示的空间，这部分预留空间就是行内元素下方空隙的通用来源。
• 两者表现不一致的核心是自身基线位置的差异：
  • 单行文本类input的基线为内部输入文字的基线，和父元素基线对齐时，input的下边框自然落在父元素基线下方，刚好覆盖基线以下的预留空间，因此肉眼看不到明显空隙。
  • textarea的浏览器默认样式自带overflow: auto，按照CSS规范，当inline-block元素的overflow属性值不是visible时，元素自身的基线为margin盒的下边缘。对齐父元素基线时，textarea的下边缘会直接卡在父元素基线上，基线下方预留的行高空间就会暴露成textarea底部的额外空白。

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>

任选一种即可解决该问题：

• 给input、textarea统一设置vertical-align: bottom/middle/top，跳过默认的基线对齐逻辑
• 给父容器设置line-height: 0，消除基线下方的预留空间，如果父容器内有普通文本，单独给文本重置合适的行高即可
• 将textarea设置为display: block，块级元素不参与行内基线对齐，不会产生这类空隙

内容的提问来源于stack exchange，提问作者code newbie