为什么CSS图片外层加padding后会出现底部空白？

图片底部空白本质是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 时被父容器底边“压住”，视觉上不明显。

1. padding-bottom 把父容器底边往下推，间隙就裸露出来了
2. 如果父容器还设了 line-height: 2，这个间隙会被放大到 ≈ 0.25 × line-height
3. DevTools 里看到的“图片和父容器底边之间有空”，实际是图片底边到行框（line box）底边的距离，不是 margin 或 padding

vertical-align: bottom 是最直接有效的修复方式

它让 <img> 底边贴合所在行框的底边，绕过 baseline 对齐逻辑，从排版根源上归零间隙。保留 inline 特性，不影响图文混排，兼容所有现代浏览器。

1. 别用 vertical-align: middle：依赖字体 x-height，换字号/字体就偏移
2. 别用 vertical-align: text-bottom：对齐文字内容区底部，仍比 bottom 高 1–2px，可能残留缝隙
3. 如果父容器是 display: flex 或 display: grid，vertical-align 直接无效（DevTools 会标灰），此时空隙本就不存在

加了 padding-bottom 还有缝？先查这三处

90% 的“修复失败”不是 CSS 写错了，而是干扰源在别处：

1. <p> 标签自带 margin-bottom，常被误判为图片缝隙
2. <img> 标签后有 HTML 换行或空格，渲染为约 4px 宽度空白符（仅 inline 场景生效）
3. 图片导出带透明底或画布留白（如 Sketch/Figma 导出未裁切），CSS 无法干预，得修图

真正容易被忽略的：父级盒模型本身就在撑空间

开发者工具里看到“图片下面有空”，第一反应不该是调 img，而是点开父容器的 Computed 面板，重点看：margin-bottom、padding-bottom、line-height 的实际计算值。很多所谓“图片底部空白”，其实是 <div> 自身 padding 或 <p> 的 margin 在起作用——空隙藏在上一级，而不是图片自己。