vertical-align只对行内级元素生效，不作用于display: block元素；真正起效的仅有不可替换行内元素（如<span>）、可替换行内元素（如<img>）及display为inline-block或inline-table的元素。
vertical-align只对行内级元素生效
它不作用于 display: block 元素，哪怕你给它们加了 vertical-align 也不会有任何视觉变化。真正起效的只有三类：不可替换的行内元素（如 <span>）、可替换行内元素（如 <img>）、以及 display: inline-block 或 display: inline-table 的元素。
常见错误是给一个 div 直接设 vertical-align: middle，却没改它的 display，结果毫无反应——因为默认 div 是块级，vertical-align 对它完全无效。
- 检查目标元素是否为行内级：用浏览器开发者工具看 computed styles 中的
display值 - 若需对块级容器做垂直对齐，应改用
flex或grid，而非硬套vertical-align -
vertical-align不继承，子元素不会自动获得父元素设置的该属性
行盒（line box）高度由 vertical-align 动态决定
很多人误以为行高（line-height）直接等于行盒高度，其实不然。行盒高度是这一行中所有行内级盒子对齐后，**最高顶部边界到最低底部边界之间的距离**。
例如：一个 <img height="100px"> 和一段 font-size: 14px 的文字并排，即使文字的 line-height 是 20px，只要 img 的 vertical-align 是 baseline（默认），它就会把底部对齐到文字基线，导致整行被撑高到约 100px —— 因为图片的 margin box 底部远低于文字 baseline。
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: top会让图片顶部贴住行盒顶部，可能大幅压缩行盒高度 -
vertical-align: middle实际对齐的是“父元素 baseline + x-height/2”，不是绝对居中，尤其当字体不同时效果会偏移 - 行盒高度一旦被某个高元素拉高，同一行其他元素即使设了
top或bottom，也仍受这个总高度约束
baseline 对齐是默认行为，但基线位置因元素类型而异
vertical-align: baseline 看似简单，却是最容易出错的点。不同元素的“基线”定义不同：
文本元素的基线 = 小写字母 “x” 的底边；<img> 这类可替换元素没有基线，浏览器将其 bottom 边作为基线；而空的 display: inline-block 元素，其基线默认是 margin box 的 bottom 边。
- 两个
inline-block并排时，若一个有文字、一个为空，它们的基线不一致，会导致错位 - 解决办法：统一设
vertical-align: top或vertical-align: middle，避免依赖隐式 baseline - 用
font-size: 0消除父容器内匿名行内盒的 baseline 影响，常用于图片列表对齐
length 和 % 值的计算基准容易混淆
vertical-align: 10px 是让元素基线相对于父元素基线**上移 10px**；vertical-align: 50% 则是基于**当前元素自身的 line-height** 计算，即上移 0.5 × line-height。
注意：对 <img> 这类无 line-height 的可替换元素，百分比值无效（会被忽略），此时只能用关键字或长度值。
- 给
span设vertical-align: 2em，偏移量基于该span自身的font-size - 在
inline-block内部设line-height，会影响其内部行盒，但不影响它作为整体参与外层行盒对齐的基线位置 - 调试时可用
outline: 1px solid red查看实际 margin box 边界，比凭感觉更可靠
行盒不是静态容器，它是根据内容+对齐规则实时计算出来的；vertical-align 的效果永远取决于“这一行里有什么”和“它们各自怎么对齐”，而不是单个元素的孤立样式。
