vertical-align 通过影响行框高度导致父容器撑高或子元素错位，是 CSS 行内布局机制而非 bug；textarea 等替换元素默认 inline-block + baseline 会拉高行框；flex 布局可彻底绕过该问题。
因为 vertical-align 不改变元素自身尺寸，却强制重排行框（line box）高度，导致父容器撑高或子元素视觉错位——这不是 bug，是 CSS 行内布局的底层机制。
vertical-align 怎么偷偷拉高父容器
当 textarea、img 或 input 这类替换元素设为 display: inline-block（默认值）并保留 vertical-align: baseline 时，浏览器会按其“基线位置”计算所在行框的高度。这个基线通常落在滚动条底边或边框下沿附近，远低于内容底部。结果就是：整行被拉高，父容器高度被动增加，即使里面只有单个元素。
常见现象包括：
- 表单中
label和textarea并排时，label看起来“浮在半空” - 多行
inline-block元素底部出现不一致空白 - 用
height: 100%包裹后，父容器高度远超预期
为什么 line-height 对它无效但又离不开它
line-height 不作用于替换元素自身的盒模型高度，但它决定了该元素参与的行框总高度。如果父容器 line-height 太小，而 textarea 的 vertical-align: baseline 又把基线压得很低，行框就会被撑得异常高；反之，若 line-height 过大，又可能让文字在框内“悬空”。
关键点：
-
line-height必须配合vertical-align使用，不能单独指望它居中 - 对
textarea，rows比line-height更可靠控制内容行数 - 设
line-height: 1.5（无单位）比line-height: 24px更安全，避免响应式断层
textarea 的 box-sizing 和 height 组合为何更危险
textarea 默认 box-sizing: content-box，且 height 属性对其内容区生效。当你写 height: 100px; padding: 12px;，在 content-box 下，内容区真就只有 76px 高——这会压缩可编辑区域，导致光标定位偏移、换行逻辑异常，甚至触发滚动条提前出现。
更麻烦的是：resize: both（默认）允许用户拖拽改变尺寸，而拖拽后 height 值被覆盖，JS 读取的 offsetHeight 和 CSS 计算值彻底脱节。
建议做法：
- 全局重置：
textarea { box-sizing: border-box; } - 禁用拖拽：
resize: none;（除非明确需要） - 优先用
rows控制初始行数，min-height作兜底 - 若必须用
height，搭配overflow-y: auto;防止内容截断
真正绕过 vertical-align 的干净方案
别跟基线死磕。把父容器设为 display: flex，子元素自动成为 flex item，vertical-align 完全失效，改由 align-items 控制垂直对齐。
例如表单行：
form .field {
display: flex;
align-items: center; /* 所有子元素垂直居中 */
gap: 8px;
}
.field label,
.field textarea {
margin: 0; /* 不再受 vertical-align 影响 */
}
这种写法消除了行框计算干扰，也规避了 HTML 空白、font-size: 0 等 hack。唯一要注意的是：flex 容器内 textarea 的 width: 100% 仍需配合 box-sizing: border-box，否则 padding + border 会溢出。
最易被忽略的一点：哪怕你只改了一个 vertical-align，整个行框的 ascent/descent 度量都会重算——这在中英混排、emoji 插入或字体 fallback 场景下，会引发难以复现的高度跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
