vertical-align: bottom是最直接有效的解法，但需确保img处于行内格式化上下文（ifc）中；设display: block虽彻底消除空隙，却会破坏图文混排。
vertical-align: bottom 是最直接有效的解法，但必须确保 img 仍处于行内格式化上下文（IFC）中；设成 display: block 虽然一劳永逸，却会破坏图文混排场景。
vertical-align 生效的硬性前提
这个属性只对 display: inline 或 display: inline-block 的元素起作用，而 img 默认就是 inline —— 但很多人写了 vertical-align: bottom 却没效果，原因往往出在上下文上：
- 父容器用了
display: flex或display: grid：此时img已是 flex item / grid item，vertical-align完全被忽略 -
img自身加了display: block：它已退出 IFC，该属性失效 - 父容器里只有
img一个行内元素：缺乏同行内参考物，vertical-align: middle等值行为不可靠
vertical-align: bottom 与 vertical-align: text-bottom 的区别
两者都能压掉底部空隙，但对齐基准不同，视觉表现有差异：
-
vertical-align: bottom：让img底边贴住**行框（line box）底边**，空隙消失最彻底，兼容性好，适合大多数“贴底”需求 -
vertical-align: text-bottom：让img底边对齐**文字内容区底部**（即 x-height 下沿，不含 descender 空间），比bottom略高一点，和旁边文字搭配更自然 -
vertical-align: top：顶边对齐行框顶边，适合图标+文字按钮类布局，避免图片“下沉”感
为什么写了 vertical-align 还有缝？常见干扰项
DevTools 里看到的“图片下面有空白”，大概率不是 vertical-align 没生效，而是别的东西在撑空间：
- 父容器设置了
padding-bottom或margin-bottom，尤其是<p></p>标签自带margin-bottom - HTML 源码中
<img>标签后有换行或空格：触发 inline 元素间的空白符渲染（约 4px），可删空白或设父容器font-size: 0 - 父容器设置了较大的
line-height：空隙高度 ≈ 0.25 ×line-height，临时加line-height: 0可验证，但需注意内部文字坍缩 - 图片本身导出带透明底或底部留白（如 Figma 导出未裁切）：CSS 无法修正，得重新导出
display: block 是最彻底的解法，但有副作用
把 img 设为 display: block，它就完全脱离行内上下文，baseline 对齐逻辑彻底失效，空隙归零。但要注意：
- ✅ 适合 banner、头图、卡片主图等独立占行的场景
- ❌ 不适合图标 + 文字按钮、
span内嵌小图等需保持水平流的结构——加了就换行 - ⚠️ 若父容器已是
display: flex或display: grid，display: block仍有效，但其实没必要，因为 flex/grid 本身就不产生该空隙
真正容易被忽略的是：这空隙从来不是图片自己的 margin 或 padding，而是行内格式化上下文（IFC）的默认规则在起作用。改 vertical-align 是最轻量、语义最干净的解法；其他方式都是在绕开 IFC，各有利弊边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
