baseline对齐本身没错，问题在于基线参照系未受控；不同字体视觉不齐源于x-height和ascender/descender比例差异，不能靠margin硬调。
直接说结论：baseline 对齐不是“错”，而是你没控制好基线的参照系；不同字体视觉不齐，本质是 x-height、ascender/descender 比例不同，不能靠 margin 硬调。
为什么 vertical-align: baseline 总看起来“偏了”
因为 baseline 是字体设计里的抽象线，不是像素线。比如 font-family: "Helvetica", sans-serif 和 font-family: "Georgia", serif 的基线在相同 font-size 下，实际离容器顶部的距离可能差 2–3px —— 这不是 bug，是字体度量（metrics）差异。更麻烦的是，vertical-align: baseline 默认让子元素的基线对齐到**父元素行框的基线**，而父元素的基线又取决于它内部最后一个文本字符（比如 “x” 或 “p”）的位置。
- 加一个
<span>x</span>在父容器末尾，就能肉眼定位它的基线位置 - 空的
<span></span>或<img alt="如何在CSS中处理不同字体的垂直对齐以及Baseline基线偏差？" >没有文本基线，浏览器会退化为用底边对齐，天然错位 -
line-height会拉高行框，间接抬升基线在容器中的绝对位置，加剧偏差
如何让不同字体的文本真正视觉对齐
别执着于“基线对齐”，多数场景要的是“视觉底部/中部一致”。优先用可预测的方案：
- 统一容器为
display: table-cell，再设vertical-align: middle或bottom—— 此时对齐锚点是盒模型边界，不受字体 metrics 干扰 - 用
flex布局时，放弃align-items: baseline，改用align-items: center或flex-end，并确保所有子项margin/padding一致 - 若必须保留 inline 布局（如内联图标+文字），给所有参与对齐的元素显式设
vertical-align: text-bottom或vertical-align: middle，而不是依赖默认 baseline - 对数字/单位组合（如 “¥34.99 元”），把单位包裹进
<span class="unit">元</span>，然后统一设font-size: 0.8em; vertical-align: top;微调
vertical-align 在哪些地方根本不起作用
这个属性只在特定上下文中生效，强行加等于白写：
立即学习“前端免费学习笔记（深入）”；
- 对
display: block元素（如普通<p></p>、<div>）加 <code>vertical-align，DevTools 里能看到声明，但 computed 值永远是baseline，且无任何渲染效果 - 在 flex 容器中，
vertical-align对子项仅在部分浏览器有副作用（Chrome 支持，Firefox 可能忽略），不可靠；应改用align-items或align-self -
vertical-align对position: absolute或float元素完全无效 - 表格单元格（
<td>）里它才最稳定——因为 <code><td> 默认是 <code>display: table-cell，这是它设计的原生场景真正难控的不是 baseline 本身，而是你试图用它解决“视觉对齐”问题——而它天生只管“排版逻辑对齐”。一旦混合了图标、输入框、不同 font-family 的文字，就该果断切换策略：用
table-cell锚定盒模型，或用flex+align-items: center统一视觉重心。那些靠反复试margin-top: -1px调出来的“齐”，下次换字体就全崩。
