图片底部空白是浏览器为文字descender预留的空间，因img默认inline且按基线对齐；display:block可消除该空隙，但会脱离文本流，需先确认布局需求。
图片底部那几像素的空白不是 bug，是浏览器按文字排版规则预留的 descender 空间；display: block 是最直接有效的解法，但得先确认图片是否需要参与文本流。
为什么 img 默认会在底部留缝
因为 <img> 是替换元素，默认 display: inline，浏览器把它当作一个“字母”来处理：对齐基线（baseline），并为可能的下伸字符（如 g、y）预留空间。哪怕父容器里没文字，这个行框（line box）依然存在，缝隙就来自基线下方那块“看不见的留白”。
- 这个空隙宽度不固定，和父容器的
font-size、line-height直接相关（比如font-size: 16px时常见 3–4px） - 它不是
margin或padding，清零无效 - 开发者工具里看到的“高度多出几像素”，往往就是 computed height 包含了这段 descender 高度
display: block 为什么能立刻消失
设成 display: block 后，<img> 彻底退出行内格式化上下文（IFC），baseline 对齐逻辑失效，descender 空间不再被预留。
- ✅ 兼容 IE8+，所有现代浏览器行为一致
- ✅ 不影响图片渲染、响应式缩放或
object-fit行为 - ❌ 会强制换行——如果图片在
<span></span>或按钮内与文字同行，加了就崩 - ⚠️ 若父容器已是
display: flex或grid，这行 CSS 多余：这些布局天然不产生该空隙
别急着加 display: block，先排查这三处
加了 display: block 还有缝？大概率不是图片的问题，而是别的东西在撑高：
- 父元素自带
margin-bottom，尤其是<p></p>、<figure></figure>这类语义标签 -
<img>标签后紧跟 HTML 换行或空格（仅在inline场景生效；但若你误判了根源，可能漏看父级） - 图片导出带透明底或未裁切（Figma/Sketch 常见），CSS 无能为力，得修图源文件
打开开发者工具，直接看 computed styles 里的 height、margin、line-height，比反复试 vertical-align 更快定位真因。
图文混排时用 vertical-align 替代
如果图片必须留在行内（比如图标 + 文字按钮），vertical-align 是唯一合理选择：
-
vertical-align: bottom：对齐到父容器底线，最贴近“贴底”预期 -
vertical-align: middle：常用于图标居中，但注意它是相对于父元素的 baseline + x-height 计算，不一定视觉居中 -
vertical-align: top：对齐到行框顶部，适合顶部对齐场景 - ⚠️ 它只对
inline和inline-block生效；一旦设了display: block，这个属性就失效了
真正要稳，得先问一句：这张图，非得和文字挤在同一行不可吗？答案是否定的，display: block 就是最干净的收口；答案是肯定的，那就老实用 vertical-align，并确保父容器没有意外的 line-height 干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
