vertical-align: top 未生效是因为它对齐的是行框顶部而非父容器顶部，受同行文字、空格、line-height等影响；可靠方案是父容器设font-size: 0并子元素显式设vertical-align: top，或改用flex/grid布局。
vertical-align: top 为什么没生效
行内块元素设了 vertical-align: top 却没对齐顶部，大概率是因为父容器是行内格式化上下文（比如 <div> 默认是块级，但里面全是 <code>display: inline-block 元素），而 vertical-align 对齐的是**行框的顶部**，不是父容器的顶部。
它实际对齐的是当前行内行框（line box）的 top 边缘——这个边缘位置由该行里「最高元素的上边缘」或「字体相关基线+行高撑开的空间」共同决定，不是你直觉里的“父盒子顶边”。
- 如果同行有文字、或未设置
font-size: 0的空格，行框顶部会被抬高 - 如果某个子元素自带默认
margin或line-height，也会干扰对齐基准 -
vertical-align只对display: inline、inline-block、table-cell生效，对block或flex子项无效
inline-block 元素顶部对齐的可靠写法
要让多个 inline-block 盒子真正“贴着父容器顶部”，最稳的方式是消除行框干扰源：
- 给父容器加
font-size: 0，消灭空格/换行产生的行内间隙 - 所有子元素显式设置
vertical-align: top - 子元素自身避免带默认
margin-top或依赖基线的line-height
示例：
立即学习“前端免费学习笔记（深入）”；
<div style="font-size: 0;"> <div style="display: inline-block; vertical-align: top; width: 100px; height: 50px; background: #eee;"></div> <div style="display: inline-block; vertical-align: top; width: 100px; height: 80px; background: #ccc;"></div> </div>
vertical-align 常见取值对比（只对 inline-block 有效）
vertical-align 的值不是绝对坐标，而是相对行框内不同参考线的位置。容易混淆的几个：
-
top：对齐行框顶部（不是父容器顶部） -
text-top：对齐父元素字体的“大写字母顶部”（ascent），通常比top低一点 -
baseline：默认值，对齐文字基线——这也是为什么图片和文字混排时总“吊着” -
middle：对齐父元素font-size的 0.5ex 处，不是盒子中点
如果父容器设置了 line-height，它会直接影响行框高度，从而改变 top 的实际位置。
更现代的替代方案：什么时候别硬扛 vertical-align
如果你的目标只是“多个盒子顶部对齐”，vertical-align 是过时且脆弱的解法。现代布局下优先考虑：
- 用
display: flex+align-items: flex-start，语义清晰、无行框干扰 - 用
display: grid+align-items: start，尤其适合等宽列场景 - 如果必须保持
inline-block（比如兼容老 IE），那就老老实实清font-size和空格，别指望靠调一个属性搞定
真正难的不是写 vertical-align: top，而是意识到它根本不在对齐“容器”，而是在协调“一行字”的内部关系。
