display:block能消除图片底部空白，因img默认为inline元素，按基线对齐预留descender空间；设为block后退出行内格式化上下文，基线逻辑失效，空白归零。
图片下方那几像素空白不是 bug，是浏览器按文本基线对齐的默认行为；解决它不靠“修复”，而靠控制元素参与布局的方式。
为什么 display: block 能直接消失空白
因为 img 默认是 inline 元素，会像字母 g 或 p 一样预留 descender 空间——哪怕没文字，浏览器也照留。设成 display: block 后，它彻底退出行内格式化上下文（IFC），基线对齐逻辑失效，空白自然归零。
- 适用场景：Banner 图、头图、独立占行的图片；不影响响应式或尺寸计算
- 不适用场景：图标 + 文字同行按钮、
span内嵌小图——加了就换行，破坏水平流 - 注意：如果父容器有
padding-bottom或包裹它的p标签自带 margin，看起来像“图片空隙”，实际不是
保持 inline 特性时用 vertical-align 的选值陷阱
vertical-align 只对 inline 和 inline-block 生效，且对齐基准不是父容器边框，而是当前行框（line box）里的其他内容。不同取值行为差异很大：
-
vertical-align: bottom—— 让图片底边贴住行框底线，最稳定，推荐用于图文混排 -
vertical-align: top—— 图片顶边对齐行框顶线，也能去空白，但若行高大，可能让图片“上浮”太多 -
vertical-align: middle—— 对齐的是 x-height 中线，不是容器中线；在font-size小或嵌套 flex 容器里容易失效 -
vertical-align: baseline是默认值，就是问题源头，别用
父容器 font-size 和 line-height 怎么悄悄放大空白
空白高度 ≈ 行高 ×（1 − 0.8）左右，受父容器 line-height 直接影响。如果父容器设了 line-height: 2 或 font-size: 24px，空白会明显变高。
- 临时压制：给父容器加
line-height: 0，再单独给文字子元素设line-height: 1.5；适合纯图容器 - 慎用
font-size: 0：虽能根除间隙，但所有后代文字需显式重设font-size，否则不可见，且部分屏幕阅读器可能异常 - flex 布局下这些都无效：
display: flex的父容器里，vertical-align和line-height对img完全不生效
为什么加了 display: block 还有缝？先查这三处
不是 CSS 失效，而是干扰源藏在别处：
- 父元素有
margin-bottom（比如p、section默认外边距） - 图片本身带透明底或导出时未裁切（Sketch / Figma 导出 PNG 常见），CSS 拿它没辙，得修图
- HTML 源码中
img标签后有换行或空格，被渲染为一个空格字符，产生约 4px 宽度间隙（只在 inline 场景下可见）
真遇到“怎么调都不干净”的情况，打开开发者工具，盯着 computed styles 看 margin、padding、line-height 三层叠加效果，比盲调 CSS 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
