vertical-align: top 仅对 inline/inline-block 元素生效，当 img 与 block 元素（如 div）共存于 block 容器时失效；推荐用 display: flex + align-items: flex-start，或统一设为 inline-block 并清除空白。
为什么 vertical-align: top 不起作用？
直接给头像 <img> 加 vertical-align: top 常常没反应，根本原因是：它只对 inline 或 inline-block 元素生效，而评论区常见布局里，头像和文字往往被包裹在 <div>（display: block）中，此时 vertical-align 完全无效。
典型错误写法：
<div class="comment"> <img src="avatar.jpg" style="vertical-align: top"> <div class="text">这是一条评论</div> </div>
这里的 <img> 虽是 inline 元素，但它的父容器是 block，且旁边 <div class="text"> 是块级元素、不参与同一行内格式化上下文 —— 所以 vertical-align 失效。
用 display: flex 最稳的解法
把头像和文字包裹进一个 flex 容器，用 align-items: flex-start 控制顶部对齐，这是目前兼容性好、语义清晰、不易出错的方式。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器（如
.comment）设为display: flex，且不设flex-direction: column - 头像和文字容器都保持默认
flex子项行为，无需额外vertical-align - 若文字内容多行，
align-items: flex-start仍能保证首行顶对齐，不会被撑高后错位
示例：
.comment {
display: flex;
align-items: flex-start; /* 关键：让子项顶部对齐 */
gap: 8px;
}
.comment img {
width: 32px;
height: 32px;
border-radius: 50%;
}
.comment .text {
margin: 0;
font-size: 14px;
}不用 Flex？试试 display: inline-block + vertical-align
如果项目还在维护老代码、不能改布局模型，可用 inline-block 方案，但必须同时处理两边元素：
- 头像
<img>默认就是 inline，但需显式设vertical-align: top - 文字容器（如
<div class="text">）必须改为display: inline-block，否则不在同一行内上下文里 - 两者之间不能有换行符或空格（HTML 中的空白会渲染成空格），否则产生意外间隙
- 注意字体基线（baseline）影响：若文字用了不同
font-size或line-height，可能微偏，此时统一设line-height: 1更稳妥
示例：
.comment {
font-size: 0; /* 消除 inline-block 间空白 */
}
.comment img,
.comment .text {
display: inline-block;
vertical-align: top;
}
.comment .text {
font-size: 14px;
line-height: 1;
}绝对定位不是好选择
有人会想用 position: absolute 把头像固定在左上角，但这会带来实际问题：
- 头像脱离文档流，文字容器宽度不会自动避开它，容易重叠或换行异常
- 响应式下难以维持间距，尤其文字缩进、RTL 语言、多行评论时表现不可控
- 无障碍支持差：
aria-label和阅读顺序容易错乱
除非头像尺寸完全固定、评论结构极其简单且无扩展需求，否则不建议。
真正要注意的是：对齐基准点其实是“内容盒顶部”，不是图片的 border-box 顶边 —— 如果头像加了 border 或 outline，又没设 box-sizing: border-box，视觉上仍可能看起来没对齐。
