display:block能直接消除图片底部空白，因为img默认为inline元素，按文本基线对齐并预留descender空间；设为block后退出行内格式化上下文，基线逻辑失效，空白归零。
为什么 display: block 能直接干掉图片底部空白
因为 <img> 默认是 inline 元素，浏览器会按文本基线（baseline）对齐它，并预留 descender 空间——哪怕图片没文字，g、p、y 这类字母该有的下延位置，它也照留。这不是 margin 或 padding，inspect 里看不到，box-sizing 也压不住。
display: block 的作用是让图片彻底退出行内格式化上下文（IFC），基线对齐逻辑失效，descender 空间自然归零。
- ✅ 所有现代浏览器（含 IE8+）都支持，无兼容性风险
- ✅ 不影响图片渲染质量或尺寸计算
- ❌ 会强制换行，不适合图标+文字按钮这类需同行显示的结构
- ⚠️ 若父容器是
flex或grid，display: block仍生效，但此时其实没必要——这些容器默认就不产生该空隙
display: block 在响应式布局中要不要加
要看图片是否“必须参与文本流”。响应式本身不改变这个规则，但容易放大误判：
- 轮播图、banner 图、卡片主图：直接上
img { display: block; }，干净利落 - 网格项（
display: grid子项）：不用加，grid item 默认是块级行为，空白本就不存在 - Flex 容器里的图标：
display: block有效，但 flex 本身已重置对齐逻辑，加了反而可能干扰align-items控制 - 媒体查询中动态切换布局（比如从 inline 到 flex）：避免在媒体查询里反复 toggle
display，统一用父容器布局方式控制更稳定
加了 display: block 还有缝？先查这三处
开发者工具里看到的“图片下面还有空”，大概率不是 CSS 没起效，而是别的东西在撑空间：
- 父容器有
padding-bottom或margin-bottom（尤其是<p></p>标签自带margin） -
<img>标签后存在 HTML 换行或空格，触发 inline 元素间的空白符渲染（约 4px） - 图片自身导出带透明底或未裁切留白（如 Figma/Sketch 导出 PNG），CSS 无法干预
别急着改 vertical-align 或套更多 hack，先在 DevTools 里逐层点开 computed styles，看 bottom 边距到底来自哪一层。
和 vertical-align 比，display: block 的真实代价是什么
它不是“更重”，而是“语义切换”——从“图文混排参与者”变成“独立块级内容”。这意味着：
- 链接包裹图片时，点击区域会扩大到整块矩形（通常是好事，但若设计要求仅图片区域可点，就得回退用
display: inline-block+vertical-align: top） - 旧项目中若依赖
img的 inline 行为做文字环绕、首字下沉等，加 block 后整个排版逻辑要重审 - 响应式断点里如果同时用
float布局，display: block会让图片脱离文档流方式发生变化，需额外测试
真正难的从来不是选哪个 CSS 属性，而是确认这张图在当前上下文里，到底该以什么身份参与布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
