图片底部4px空白源于img默认inline导致的行框descender空间，解决方法包括vertical-align: bottom、display: block或调整父级line-height与盒模型。
为什么图片底下总多出4px空白
这不是 margin 或 padding，也不是你漏写了什么样式——<img> 默认是 display: inline，浏览器把它当文字处理，强制预留 descender 空间（给字母 g、y 下延部分），哪怕周围没一个字，这 4px 左右的空隙也照留。它属于行框（line box）的底层排版逻辑，inspect 看不到，但背景色一涂就露馅。
vertical-align: bottom 能立刻压掉空隙，但只在 inline 场景生效
加这句最常用也最稳：img { vertical-align: bottom; }。它让图片底边直接贴住当前行框的底边，绕过 baseline 对齐，空隙归零。
- 别用
vertical-align: middle—— 单独一个<img>没参考系，位置飘，不同字体下表现不一致 -
vertical-align: text-bottom会比bottom高一点点，有时和旁边文字更协调，但可能残留 1–2px - 如果父容器是
display: flex或display: grid，vertical-align直接被忽略——此时图片已是 flex item / grid item，不再走行内流程 - 若父级
line-height很大（比如line-height: 2），空隙会被放大；单调img的vertical-align不管用，得同步控制父级行高或设font-size: 0
display: block 是最彻底的解法，但会破坏图文混排
img { display: block; } 一加，空隙立刻消失。因为它让 <img> 退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效。
- ✅ 适合 banner、轮播图、卡片封面这类独占一行的图片
- ✅ 在 flex/grid 容器里加了也生效，但其实没必要——这些布局天然不产生该空隙
- ❌ 别在按钮图标、
<span></span>内嵌小图、<p></p>里加——它会强制换行，文字被挤到下一行 - ⚠️ 加了还有缝？先查三处：
<p></p>自带的margin-bottom、<img>标签后 HTML 换行/空格（inline 场景下渲染为约 4px 空白符）、图片导出带透明底或未裁切（CSS 修不了，得重导）
真正容易被忽略的干扰源：空隙常不在图片上，而在父级盒模型里
开发者工具里看到“图片下面有空”，90% 不是 img 自己的问题：
-
<p></p>、<div> 这类父元素自带 <code>margin-bottom或padding-bottom，误判成图片缝隙 -
<img>后面有换行或空格，在 inline 模式下被渲染为一个空白字符（约 4px 宽） - 图片本身导出时带透明底、画布留白（Figma/Sketch 常见），CSS 无能为力
- 父容器
line-height过大，空隙高度 ≈ 0.25 × line-height；临时加line-height: 0可验证，但会影响内部文字
先打开 DevTools 查 computed styles，重点看父级的 margin、padding 和实际盒模型高度，比反复调 vertical-align 更快定位真因。
