图片底部空白本质是inline元素基线对齐产生的间隙，padding-bottom仅使其显形；vertical-align: bottom可根治，而flex/grid布局下该问题天然不存在。
不是 padding 本身导致底部空白，而是 padding 暴露了 img 默认 inline 行内对齐产生的基线间隙。
为什么 padding-bottom 会让图片“看起来”多出空白
给图片外层容器（比如 <div> 或 <p>）加 padding-bottom，并不会凭空制造新空隙；但它会让原本被容器边框“遮住”的基线间隙显形——就像拉开窗帘后，你才发现窗台下一直有灰。
根本原因仍是：<img> 默认是 display: inline，参与行内格式化上下文（IFC），浏览器为 descender（如字母 g、y 的下延部分）预留约 2–4px 空间。这个间隙始终存在，只是没 padding 时被父容器底边“压住”，视觉上不明显。
-
padding-bottom把父容器底边往下推，间隙就裸露出来了 - 如果父容器还设了
line-height: 2，这个间隙会被放大到 ≈ 0.25 × line-height - DevTools 里看到的“图片和父容器底边之间有空”，实际是图片底边到行框（line box）底边的距离，不是 margin 或 padding
vertical-align: bottom 是最直接有效的修复方式
它让 <img> 底边贴合所在行框的底边，绕过 baseline 对齐逻辑，从排版根源上归零间隙。保留 inline 特性，不影响图文混排，兼容所有现代浏览器。
立即学习“前端免费学习笔记（深入）”；
- 别用
vertical-align: middle：依赖字体 x-height，换字号/字体就偏移 - 别用
vertical-align: text-bottom：对齐文字内容区底部，仍比bottom高 1–2px，可能残留缝隙 - 如果父容器是
display: flex或display: grid，vertical-align直接无效（DevTools 会标灰），此时空隙本就不存在
加了 padding-bottom 还有缝？先查这三处
90% 的“修复失败”不是 CSS 写错了，而是干扰源在别处：
-
<p>标签自带margin-bottom，常被误判为图片缝隙 -
<img>标签后有 HTML 换行或空格，渲染为约 4px 宽度空白符（仅 inline 场景生效） - 图片导出带透明底或画布留白（如 Sketch/Figma 导出未裁切），CSS 无法干预，得修图
真正容易被忽略的：父级盒模型本身就在撑空间
开发者工具里看到“图片下面有空”，第一反应不该是调 img，而是点开父容器的 Computed 面板，重点看：margin-bottom、padding-bottom、line-height 的实际计算值。很多所谓“图片底部空白”，其实是 <div> 自身 padding 或 <p> 的 margin 在起作用——空隙藏在上一级，而不是图片自己。
