为什么仅设置textarea的vertical-align为top就能与默认baseline的label顶部对齐

对齐原理说明 #

这个效果是由行内块元素的vertical-align规则、行框的自动计算逻辑共同决定的，核心原因如下：

1. 你的代码中<label>设置了display: inline-block，<textarea>本身就是原生行内块级元素，二者属于同一个行框内的同级行内元素。
2. vertical-align定义的是元素自身在当前行框中的对齐位置，不是两个元素之间的直接绑定对齐：
   • 给<textarea>设置vertical-align: top的作用是：让textarea的顶部边缘，严格对齐当前整行行框的顶部边缘。
   • 你的场景里textarea是当前行框中高度最高的元素，整个行框的高度完全由textarea的高度撑开，行框的顶部边缘就是textarea的顶部边缘。
3. 默认vertical-align: baseline的label也能顶对齐的原因：行框的基线位置不是固定值，会根据当前行内所有元素的对齐要求自动调整。为了满足textarea对齐行框顶部的规则，行框的基线会向下偏移到匹配的位置，这时候label按照基线对齐的规则摆放后，它的顶部刚好和行框顶部（也就是textarea的顶部）重合，最终表现为二者顶部对齐。

你可以自行验证：如果给label设置一个远大于textarea高度的height值，此时行框高度会被label撑开，哪怕textarea还是设置vertical-align: top，最终也是textarea的顶部对齐label的顶部，逻辑完全一致。

核心相关代码 #

/* label 样式 */
label {
  width: 90px;
  display: inline-block;
  text-align: right;
}
/* textarea 关键对齐样式 */
textarea {
  vertical-align: top;
  font: 1em sans-serif;
  width: 300px;
  box-sizing: border-box;
  border: 1px solid #999;
}

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