vertical-align: bottom 是最稳的 inline 解法，它让图片底边贴住行框底边，绕过 baseline 对齐逻辑，彻底消除 descender 留下的 2–4px 空隙，兼容所有现代浏览器且不破坏图文混排。
vertical-align: bottom 是最稳的 inline 解法
图片默认 vertical-align: baseline，浏览器会为 descender（字母 g、y 的下伸部分）预留空间，哪怕周围没文字，这空隙也照出——通常 2–4px。加 vertical-align: bottom 让图片底边直接贴住行框（line box）底边，绕过 baseline 对齐逻辑，空隙归零。
它保留 img 的 inline 特性，不破坏图文混排，所有现代浏览器都支持。别用 vertical-align: middle：没参考系，换字体/字号就偏移；vertical-align: text-bottom 比 bottom 高 1–2px，可能残留缝隙。
注意：vertical-align 只在 img 是 inline 或 inline-block、且父容器**没启用 flex/grid** 时才生效。DevTools 里看到它被标灰，说明布局已切换，此时它不起作用。
display: block 能彻底消除但代价明确
display: block 一加，空隙立刻消失——因为 img 退出行内格式化上下文（IFC），baseline 对齐逻辑直接失效。
但它会让图片强制换行，破坏图标+文字按钮、<p></p> 内嵌小图等场景。适合这些情况：
- banner、轮播图、卡片封面等独占一行的图片
- 父容器本就是
flex或grid，加了也无害（但其实冗余） -
<li>里只放一张图，无需同行文字
如果加了 display: block 还有缝，大概率不是它没生效，而是父元素自带 margin-bottom（比如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>）、或图片导出带透明底/未裁切——CSS 修不了。
父容器是 flex 或 grid 时，空隙本就不存在
一旦父级设了 display: flex 或 display: grid，img 就变成 flex item / grid item，不再参与行内格式化上下文（IFC），vertical-align 被忽略，descender 空隙天然不产生。
此时对齐由 align-items 或 align-self 控制。如果仍看到空隙，优先检查：
- 父容器是否意外设置了
padding-bottom或margin-bottom -
<img>标签后有没有 HTML 换行/空格（在 inline 场景下渲染为约 4px 空白符，但在 flex/grid 中不生效） - 是否用了
display: inline-flex？这种混合模式下，整个 flex 容器仍可能以“行内块”身份参与基线对齐，空隙会重现
容易被忽略的干扰源：空隙常不在图片上
开发者工具里看到“图片下面有空”，90% 不是 img 自己的问题：
-
<p></p>标签自带margin-bottom，误判成图片缝隙 -
<img>后存在换行或空格，在 inline 模式下被渲染为一个空白字符（约 4px 宽） - 父容器
line-height过大（如line-height: 2），空隙高度 ≈ 0.25 × line-height；单调调img的vertical-align无效 - 图片导出时带透明底、画布留白（Figma/Sketch 常见），CSS 无能为力
真要快速定位，打开 DevTools，逐层检查 computed styles 中的 margin、padding 和盒模型高度——比反复试 vertical-align 更快找到根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
