加 vertical-align: bottom 仍有缝，是因为父容器为 flex/grid 时该属性被忽略；真因多是 p 标签 margin-bottom、HTML 空格生成的文本节点、或父级 line-height 过大所致。
为什么加了 vertical-align: bottom 还有缝？
不是这个属性没生效，而是它只在 img 是 inline 或 inline-block 时起作用；一旦父容器设了 display: flex 或 display: grid，vertical-align 就被浏览器完全忽略（DevTools 里会标灰）。此时图片已是 flex item / grid item，不再走行内格式化上下文（IFC），baseline 对齐逻辑压根不触发——那“缝”大概率是别的东西撑出来的：
-
<p></p>标签自带margin-bottom，清掉再看 -
<img alt="如何在CSS中解决图片底部默认出现的3px空隙" >标签后存在 HTML 换行或空格，会被渲染成约 4px 宽的文本节点（尤其常见于 Figma 导出 HTML） - 父容器设置了大
line-height（如line-height: 2），单改img的vertical-align无效，得同步控制父级或临时加font-size: 0
display: block 真的能一劳永逸？
能归零空隙，但代价明确：图片彻底退出文本流，强制换行。它生效的本质是让 img 脱离 IFC，baseline 对齐逻辑直接失效。
- ✅ 适合 banner、轮播图、
<figure></figure>主图，或父容器已是flex/grid的场景（此时加了也无害，但冗余） - ❌ 不适合
<button><img alt="如何在CSS中解决图片底部默认出现的3px空隙" >文字</button>这类图文同行结构，加了文字立刻被顶到下一行 - ⚠️ 若加了仍有缝，说明问题不在
img自身——检查父元素是否自带margin、图片导出是否带透明底、或是否存在未闭合的标签嵌套
图文混排时唯一靠谱的解法是 vertical-align: bottom
它让图片底边贴住**行框（line box）底线**，绕过 baseline 对齐逻辑，空隙归零，且保留 inline 行为不破坏布局。
-
vertical-align: middle依赖字体 x-height，换字体/字号就偏移，不推荐单独用 -
vertical-align: text-bottom对齐的是文字内容区底部，比bottom高 1–2px，可能残留缝隙 - 别碰
font-size: 0或line-height: 0：前者会继承影响所有子文字，后者直接压扁文字，都是伪解法
真正要定位真因，别瞎试 CSS
打开开发者工具，直接看 computed 样式里的 height、line-height、margin-bottom，比反复试 vertical-align 值快得多。空隙常藏在父级盒模型里，不是图片的问题——尤其是当加了 display: block 还有缝时，基本可以确定是父容器 margin、HTML 空白符，或图片自身导出问题。
