img 默认 inline 导致底部间隙的本质原因是浏览器将 img 当作行内文字处理，按 baseline 对齐并为 descender 预留空间，间隙≈0.2×font-size；display: block 可彻底消除，vertical-align: bottom 是图文混排下唯一合理方案。
img 默认 inline 导致底部间隙的本质原因
这个“3px 白边”不是 margin、padding，也不是 bug，而是浏览器把 <img alt="如何在CSS中解决图片底部默认3px白边间隙的盒模型问题？" > 当作行内文字处理的结果：它默认 vertical-align: baseline，并为字母 g、y 的下伸部分（descender）预留空间。间隙高度 ≈ 0.2 × font-size，所以 font-size: 16px 时常见 3–4px；换字号、换字体、换浏览器都可能变化。
display: block 是最直接有效的解法，但得看场景
设 img { display: block; } 后，图片退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效，间隙立刻消失。
- ✅ 适用：轮播图、
<figure></figure>主图、flex/grid 容器里的图片——这些本就不该参与文本流 - ❌ 不适用：按钮图标、图文混排中的小图——加了会强制换行，文字被顶到下一行
- ⚠️ 若父容器已是
display: flex或display: grid，这行 CSS 无效但也不报错，纯属冗余
vertical-align: bottom 是图文混排的唯一合理选择
当图片必须保留在行内（比如 <button><img alt="如何在CSS中解决图片底部默认3px白边间隙的盒模型问题？" >文字</button>），vertical-align 是唯一可控手段：
-
vertical-align: bottom：对齐到父容器内容区底线，视觉上最贴近“贴底”预期，兼容性最好 -
vertical-align: middle：按 x-height 计算，不一定视觉居中；top和text-top适合顶部对齐场景 - ⚠️ 注意：
vertical-align只对inline和inline-block生效；一旦设了display: block，它就完全失效
别碰 font-size: 0 和 line-height: 0 这类“伪解法”
在父容器设 font-size: 0 确实能压掉间隙，但它会继承影响所有子级文字，尤其在 rem/em 场景下易引发缩放异常；line-height: 0 更危险——文字会被压成一条线，还得额外重置子元素 line-height。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
margin-bottom: -4px属于“修 bug 的 bug”，像素值硬编码，换环境即失效 - 用
overflow: hidden裁切父容器，掩盖问题但不解决根源，且可能误裁图片圆角或阴影 - 真正要定位真因，打开开发者工具，直接看 computed 的
height、line-height、margin-bottom，比反复试 CSS 快得多
最常被忽略的一点：加了 display: block 还有缝？那大概率不是图片的问题——检查父元素是否自带 margin-bottom（比如 <p></p>、<figure></figure>），或者 <img alt="如何在CSS中解决图片底部默认3px白边间隙的盒模型问题？" > 标签后有没有 HTML 换行/空格，又或者图片源文件本身带透明底未裁切。
