vertical-align仅对inline-block/替换元素生效，需配合display: inline-block使用；baseline对齐x底边，middle对齐x中点而非行高中点，像素值最可控但纯文本节点无效。
HTML 行内元素怎么微调文字上下位置
用 vertical-align，不是 margin 或 padding，更不是 position: relative —— 那些在行内会破坏基线对齐，导致整行高度异常或相邻文字错位。
vertical-align 常见取值和实际效果
它只对行内元素（inline、inline-block）和表格单元格生效，且作用对象是“当前元素相对于父行框基线的位置”，不是绝对偏移：
-
vertical-align: baseline（默认）：元素底部对齐父元素的基线（注意：不是文字底部，是字母 x 的底边） -
vertical-align: middle：元素中点对齐父元素小写字母 x 的中点，**不是行高中点**，容易误判 -
vertical-align: top/bottom：对齐行框的上/下边缘，但受行高影响大，不同字体大小下表现不一致 -
vertical-align: -2px这类像素值：最可控，适合精确微调，但只对inline-block或替换元素（如img）可靠；对纯文本节点无效
为什么 span 加 vertical-align 没反应
因为普通 span 是纯内联非替换元素，vertical-align 对它起效的前提是：它必须参与基线对齐——而一旦设了 display: inline-block 或 display: inline-flex，它就变成块级盒子，vertical-align 才真正接管其垂直定位：
- 错误写法：
<span style="vertical-align: 5px">文字</span>→ 无效 - 有效写法：
<span style="display: inline-block; vertical-align: 5px">文字</span> - 如果只是想调单个字符（比如上标），优先用
<sup></sup>或<sub></sub>，它们自带语义和默认样式
字体渲染差异带来的坑
不同字体的基线、x-height、行高计算方式不同，同一段 vertical-align: middle 在 "Helvetica" 和 "Noto Sans CJK" 下可能差 1–2px。更麻烦的是，Chrome 和 Safari 对 inline-block 元素的基线判定逻辑略有差异，尤其当内部有 padding 或 line-height 不为 1 时：
立即学习“前端免费学习笔记（深入）”；
- 保险做法：统一设置
line-height: 1和font-size，再用像素值微调 - 避免混用多种字体族在同行内，除非显式重置
vertical-align - 调试时右键检查元素，看 computed 样式里
vertical-align是否被继承或覆盖
真正难的不是加那行 CSS，而是判断该对齐谁、基线在哪、父容器有没有隐式 line-height 拉高——这些得靠开发者工具里拖着元素看实时对齐线才清楚。
