直接加 vertical-align: top 可解决 inline-block 垂直错位问题，因其强制所有元素顶部对齐行盒顶部；但必须统一应用于所有相关元素，因默认 baseline 对齐下，含文本元素基线为字母x底边，空元素基线为 margin 底边，二者天然不一致导致“一高一低”。
直接加 vertical-align: top 就能解决大部分 inline-block 对齐错位问题，但前提是理解它只作用于当前行内格式化上下文（IFC），且必须加在所有相关元素上，不能只加一个。
为什么 inline-block 元素会“一高一低”
默认 vertical-align: baseline 是罪魁祸首。baseline 不是固定的线——含文本的元素以文字基线（比如字母 x 的底边）为参考；空元素或仅含换行/空格的元素，浏览器按规范将其 baseline 定为 margin 底边。两者位置天然不一致，于是视觉上就“错开”了。
常见错误现象包括：
- 按钮组里带 “X” 的按钮看起来“下沉”，旁边空白按钮反而“浮起”
- 同一行的
<img>和<span>总是底部不对齐 - 用
display: inline-block做图标栏时，部分图标明显偏下
vertical-align: top 必须加在所有目标元素上
只给其中一个元素设 vertical-align: top 没用，对齐是相对行为：它让当前元素的顶部和整行的“行盒顶部”对齐，但其他未设置的元素仍走 baseline，结果还是错位。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一写在共用选择器里，比如
button, .icon, img { vertical-align: top; } - 避免用通配符
* { vertical-align: top; }，它会影响<input>、<label>等本不该参与行内对齐的元素 - 如果父容器用了
font-size: 0消间隙，记得子元素里重置font-size，否则文字可能不可见
vertical-align 在哪些场景下完全无效
vertical-align 只对特定显示类型生效，不是万能对齐属性。
以下情况它不起作用：
- 元素
display计算值是block、flex、grid或table—— 此时该属性被忽略 - 元素是浮动（
float: left）或绝对定位（position: absolute）—— 它们已脱离常规流，vertical-align失效 - 想靠它让 flex 子项垂直居中——该用
align-items，不是vertical-align
容易被忽略的一点：即使你写了 vertical-align: top，如果父容器设置了 line-height 极小（如 line-height: 1），而子元素高度远超它，顶部对齐后仍可能被“挤”出可视区域——这时得检查行高与元素尺寸是否匹配。
