vertical-align: bottom 是最直接有效的解法：它让 img 底边贴住行框底线，绕过 baseline 对齐逻辑消除缝隙，同时保留 inline 行为不破坏图文混排。
vertical-align: bottom 是最直接有效的解法
图片下方那条 2–5px 的缝隙，本质是 img 默认 vertical-align: baseline 导致的——浏览器为字母 g/y 的下伸部分（descender）预留空间，哪怕父容器空无一物，这个行框（line box）底边和基线之间的空隙依然存在。
vertical-align: bottom 让 img 底边直接贴住行框底线，绕过 baseline 对齐逻辑，空隙归零，且保留 display: inline 行为，不破坏图文混排结构。
使用时注意以下几点：
-
vertical-align只对inline、inline-block、table-cell元素生效；设成display: block后该属性就失效了 -
vertical-align: middle依赖字体 x-height，换字体或字号容易偏移，不推荐单独使用 -
vertical-align: text-bottom对齐的是文字内容区底部，比bottom高 1–2px，可能残留缝隙 - 若父容器设置了大
line-height（如line-height: 2），单改img的vertical-align无效，需同步控制父级行高，或临时加font-size: 0
display: block 适合独立图片但会破坏内联结构
img { display: block; } 是最彻底的方案：它让图片退出行内格式化上下文（IFC），baseline 对齐逻辑完全失效，缝隙立刻消失。
立即学习“前端免费学习笔记（深入）”；
但它有明确适用边界：
- ✅ 适合 banner、轮播图、
<figure>中的主图，或已处于flex/grid容器中的图片（此时display: block虽冗余但无害） - ❌ 不适合
<button><img>文字</button>这类需要图文同行的场景，加了就会强制换行 - ⚠️ 若父容器是
inline-flex，且外层还有文字，间隙可能以别的形式重现
别只盯着 img 标签，先排除常见干扰项
DevTools 里看到“图片下面有缝”，大概率不是 img 自己的问题：
-
<p>标签自带margin-bottom，清掉父元素的 margin 再判断 -
<img>标签后存在 HTML 换行或空格，会被渲染成约 4px 宽的文本节点，导致视觉缝隙（尤其在 Figma/Sketch 导出 HTML 时常见） - 父容器设置了
font-size或line-height，间接放大了 baseline 空隙；可临时加font-size: 0验证，但别长期用——会影响子元素文字 - 用
margin-bottom: -4px这类像素硬调方案，换字体、换字号、换浏览器都可能失效，属于“修 bug 的 bug”
flex/grid 布局天然规避该问题，但要注意隐式行为
一旦父容器设了 display: flex 或 display: grid，子 img 自动变成 flex item 或 grid item，不再走 inline 渲染流程，vertical-align 完全无效，descender 空隙也不存在。
但两个细节容易被忽略：
- 如果图片是 flex 容器里唯一子项，又没设高度，它可能因默认
align-items: stretch被拉伸——这不是缝隙，是拉伸 -
inline-flex容器仍属于行内上下文，若外层有文字，缝隙可能以“行高溢出”形式出现，不能默认认为“用了 flex 就安全”
真正要盯住的，是图片所处的上下文：它是不是还在行内流里？只要还在 inline 或 inline-block 流中，baseline 缝隙就随时可能冒出来。
