图片下方约3px空隙源于img默认inline时浏览器为descender（如g、y）预留空间；display:block可彻底消除但强制换行，vertical-align:bottom更适图文混排。
为什么图片在 div 里总多出约 3px 空隙
这不是 margin、padding 或 bug，而是 img 默认为 inline 元素，浏览器按文字排版规则处理它：预留 descender 空间（给字母 g、y、p 的下延部分），哪怕父容器没文字，这个间隙也照常出现。空隙高度随 font-size 和 line-height 增大而变明显。
display: block 真的能一键清空吗
能，但得确认使用场景是否匹配：
-
img { display: block; }让图片退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效，空隙归零 - 兼容性极好，IE8+ 都支持，且不依赖父容器样式
- 副作用是：图片变成块级元素后默认独占一行，若它和文字、按钮等并排，会强制换行破坏布局
- 如果父容器已是
display: flex或display: grid，display: block仍生效，但其实没必要——flex/grid 容器天然不触发该空隙
加了 display: block 还有缝？先查这三处
常见“失效”不是 CSS 没起作用，而是干扰源藏在别处：
- 父容器（比如
p、div）自带margin-bottom，开发者工具里看 computed styles 会发现 margin 在起作用 - 图片被包裹在带默认样式的标签里（如
figure、section），实际是外层盒子的 padding 或 margin - 图片本身含透明底或导出时未裁切（如 Sketch 导出 PNG 留白），这时改 CSS 没用，得修图
不想用 display: block 怎么办
保留 img 行内特性、又想消缝，优先试这三个方案（按稳定性排序）：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: bottom;—— 对齐父容器底线，不改变盒模型，图文混排安全，推荐首选 -
vertical-align: top;—— 对齐父容器顶线，适合图标类小图，但可能让文字上浮 - 父容器设
font-size: 0;，再给子文字显式设回font-size—— 有效但麻烦，容易漏重置字体，仅作备用
别碰 line-height: 0 或 float：前者会让所有行内内容挤压变形，后者已过时且引发清除浮动新问题。
