图片底部空白是浏览器对inline元素的正常排版行为，根本解法是img{display:block}，使其脱离行内格式化上下文，彻底消除baseline对齐导致的descender预留间隙。
图片下方那几像素的空白不是 bug，是浏览器对 inline 元素排版行为的正常体现；最稳妥、无副作用的解法是给 img 加 display: block。
为什么 img 底部总有一条小空隙？
因为 img 默认是 inline 元素，会参与行内格式化上下文（inline formatting context），像字母“g”一样，在行框底部预留 descender 空间——这个空间约 3–4px，即使没文字、没父容器 line-height，它也存在。
用开发者工具检查盒模型，会发现间隙在 img 盒子下方、父容器边框上方，且 margin 和 padding 都为 0 —— 这说明问题不在样式层，而在渲染层。
- 该间隙与
vertical-align默认值baseline强相关 -
font-size或line-height改变时，间隙大小可能浮动 - 哪怕只放一张图，只要父容器是默认
inline上下文，间隙就存在
display: block 是首选解法
设 img { display: block; } 后，img 脱离行内流，不再受基线对齐约束，间隙立刻消失，且不干扰其他布局逻辑。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 兼容所有现代浏览器，包括 IE9+
- 无需调整父容器高度、
font-size或line-height - 不影响响应式行为，
width: 100%、max-width等仍照常生效 - 若图片需与文字并排（如图标+文字按钮），则此方案不适用，需换用
vertical-align
vertical-align 只在 inline 场景下有效
当必须保留 img 的 inline 特性（例如嵌入段落或与 span 混排）时，vertical-align 是唯一可行的 CSS 控制手段。
-
vertical-align: top或bottom最可靠，能彻底切断 baseline 对齐 -
vertical-align: middle表现不稳定——它对齐的是行框中线，而中线位置取决于父容器line-height，未显式设置时易残留空隙 - 设了
display: block后再写vertical-align无效，浏览器会忽略 - 不要用
vertical-align: baseline（默认值）或inherit，等于没改
font-size: 0 是治标不治本的权宜之计
给父容器设 font-size: 0 确实能“隐藏”间隙，但这是靠压制行内渲染上下文实现的，副作用明显：
- 若父容器内含文字，必须手动给文字恢复
font-size，否则文字不可见 - 影响子元素继承链，比如
em单位计算会出错 - 在 flex 或 grid 容器中基本无效，因它们已脱离传统行内流
- 它解决的是“看起来没有”，而非“实际不存在”，调试时仍可能暴露问题
真正容易被忽略的点是：这个问题从来不是单一 CSS 属性能“修复”的——它根植于 HTML 元素默认显示类型和浏览器排版引擎的设计逻辑。选 display: block 不是因为它多高级，而是因为它直接切掉了问题源头，干净、确定、可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
