img 默认按基线对齐，因是行内元素，下方预留字母下伸空间；vertical-align仅对inline/inline-block有效，flex/grid中需用align-items等替代。
img 标签默认对齐行为为什么不是顶部
因为 <img> 是行内元素（inline），默认按基线（baseline）对齐，也就是文字底部对齐。图片下方会留出一点空间——那是给字母如 g、j、y 的下伸部分预留的，所以看起来像“悬在半空”，实际是文字基线在作怪。
常见错误现象：vertical-align: top 写了但没生效，往往是因为父容器用了 display: flex 或 display: grid，此时 vertical-align 完全不生效；或者图片被包在 <p></p> 或 <span></span> 里，但没重置行高或字体大小，导致基线位置难以预测。
- 只对行内级元素（
inline、inline-block）有效，对block或flex子项无效 - 推荐优先用
vertical-align: top配合display: inline-block，比改line-height更可控 - 如果父容器是
flex，直接用align-items: flex-start，别碰vertical-align
CSS 实现图片顶部对齐的三种可靠写法
没有“唯一正确”，只有“当前场景最稳”。选哪种，取决于你能不能改 HTML 结构、父容器类型、是否要兼容 IE11。
-
vertical-align: top：适用于图片在段落、按钮等行内流中，且父容器未设display: flex/grid。加一句display: inline-block更保险 -
display: block; margin: 0：图片独占一行时最干净，彻底脱离行内布局干扰，vertical-align不再起作用，自然顶边贴齐 -
display: flex; align-items: flex-start（父容器上）：现代布局首选，尤其当图片和文字并排时，避免基线对齐所有副作用
示例（行内安全写法）：
<div>@@##@@ 文字</div>
容易被忽略的兼容性与细节坑
IE8–IE11 对 vertical-align 在表格单元格（<td>）里的表现和现代浏览器不同；而 Chrome/Firefox 对 <code>font-size: 0 清除行内间隙的方式支持一致，但 Safari 在某些 zoom 级别下会漏掉 1px。
-
vertical-align的值如text-top和top视觉差异极小，但top对齐的是父容器内容区顶边，text-top对齐的是父容器字体的“大写字母顶线”，别混用 - 如果图片外层有
padding或border，顶部对齐后可能仍显“下沉”，其实是 padding 把内容区往下推了，需检查盒模型 - 使用
object-fit: cover的图片，若容器高度固定但宽高比不匹配，vertical-align依然生效，但视觉上可能被裁剪掩盖了对齐效果
什么时候不该硬套顶部对齐
不是所有“想顶着”都该用 CSS 对齐。比如表单中图标 + 文字输入框，强行 vertical-align: top 可能让图标和输入框文字错位；更合理的是统一用 flex 布局，让两者共享同一套对齐逻辑。
- 图标类小图（16×16）配合文字时，
vertical-align: middle往往比top更协调 - 响应式场景下，图片宽高不定，
vertical-align会随字体大小变化浮动，此时用grid的align-self: start更稳定 - 如果图片是背景图（
background-image），就别折腾<img src="a.jpg" style="max-width:90%">对齐，直接用background-position: top
真正难的不是写哪行 CSS，而是判断它到底该对齐谁——父容器的内容区？文字行框？还是隔壁那个没设 line-height 的 <span></span>？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
