表格单元格中vertical-align: baseline并非默认值，默认是middle；它使元素基线对齐，但在表格中因缺乏参照而表现异常，仅适用于纯文本或表单控件对齐等特定场景。
vertical-align: baseline 在表格单元格中**不是默认生效的垂直对齐方式**——这是最容易被误解的一点。表格的 td 和 th 元素默认使用 vertical-align: middle，而不是 baseline。所以如果你直接写 vertical-align: baseline，它确实能生效，但效果往往和预期相反：文字看起来“下沉”，图片或输入框反而“上浮”，尤其在混合内容（如文字+图标）时特别明显。
为什么 baseline 在表格里看起来“不对劲”
因为 baseline 是为行内文本设计的对齐逻辑：它让元素的基线（字母 x 底部那条线）与父容器中其他行内元素的基线对齐。但在表格单元格中，没有“相邻行内元素”提供参考基线，浏览器会退而求其次，用单元格内第一行文本的基线作为锚点——而这个锚点位置受 line-height、字体大小、甚至是否含 descender 字母（如 g、y、p）影响极大。
哪些场景下适合用 vertical-align:baseline
真正需要 vertical-align: baseline 的表格场景其实很窄，常见于：
- 单元格内只含纯文本（无换行、无图片、无表单控件）且需与外部行内上下文保持基线一致（比如嵌套在段落中的小表格）
- 配合
input或select等表单控件做对齐时，baseline反而比middle更自然（因为表单控件默认就是基线对齐） - 导出为 PDF 或打印样式中，为保证跨平台渲染一致性而强制统一基线
baseline 和 middle 的实际差异示例
对比下面两行：
| 文字 | |
| 文字 |
你会发现第一行中，“文字”和“输入框”的底部基本对齐（因为 input 默认基线对齐），而第二行中，文字整体被抬高、输入框被压低，视觉上更“居中”但基线错位。
容易踩的坑
vertical-align: baseline 在表格中不支持百分比或长度值偏移（如 baseline + 2px），它只接受关键字；IE8 及更早版本完全不识别 inherit 值；如果单元格内有 img，它会把图片底边对齐到文字基线，导致图片下方留白——这不是 bug，是规范行为。
真正要控制表格内容对齐，优先考虑 vertical-align: middle；只有当你明确需要与行内流式布局保持基线一致，且已验证过字体、line-height、内容结构不会造成意外偏移时，才用 baseline。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
