vertical-align 决定行内盒子用自身基线（或底边）对齐行框基线，而非修改基线；仅在IFC中生效，遇block、flex、grid、absolute或line-height:0/font-size:0时失效。
vertical-align 不是“改变基线”，而是决定行内盒子用哪条线去对齐——而这条线，就是它自己的基线（或 fallback 到底边）。
vertical-align 的作用对象其实是行框（line box），不是父容器
当你给一个 <img> 或 display: inline-block 元素设 vertical-align: baseline，浏览器不会去“修改”它的基线位置，而是：在当前行框中，找出该元素的基线（或底边），再把它和父级行框里其他内容的基线对齐。
关键点在于：
- 每个行框有自己独立的基线参考系，由该行内所有 inline-level 元素共同参与计算
-
<img>没有文字基线，所以 fallback 到底边向上约 4px 处（预留 descender 空间） - 含文字的
<button>基线取决于内部文本的font-size和line-height - 空
<button>可能连 fallback 都不稳定，直接看 margin-bottom 边缘
middle 为什么看起来总偏高或偏低？
vertical-align: middle 的对齐锚点不是父容器中心，也不是行框中心，而是：该元素自身中点 对齐到 父行框内 text-top 与 text-bottom 的中点。
立即学习“前端免费学习笔记（深入）”；
这个中点位置受以下因素直接影响：
- 父级
font-size（哪怕子元素自己设了不同字号） - 父级
line-height（决定 text-top/text-bottom 间距） - 兄弟元素是否用了不同字体或字号（会扰动整行的行框高度）
所以响应式场景下，rem 或 vw 动态缩放字号时，middle 极易漂移——这不是 bug，是规范行为。
什么时候 vertical-align 根本不生效？
最常被忽略的前提是：vertical-align 只对参与行内格式化上下文（IFC）的元素起作用。以下情况它会被无视：
- 元素设了
display: block（哪怕里面只有文字） - 父容器是
display: flex或display: grid，此时对齐应交给align-items或place-items - 元素是绝对定位（
position: absolute），已脱离正常流 - 父容器设置了
line-height: 0且无其他内联内容，导致行框高度坍缩为 0
真正容易被忽略的是：哪怕所有子项都是 inline-block，只要父容器设了 font-size: 0（常见于清除 inline 元素间隙的 hack），整个行框的基线参考系就失效了——此时 vertical-align 表现不可预测，必须显式恢复 font-size 或换布局方案。
