图片底部空白等布局问题源于vertical-align: baseline与IFC中行框高度计算机制；空格本身不撑开间隙，但参与行框构建，其所在字体的降部会拉高line-height下限；修改img的vertical-align可改变整行基线参考系，从而影响空格位置；根治需让img退出IFC（如display: block）或父容器font-size: 0。
图片底部的空白缝隙、文字和图标错位、inline 元素间莫名多出几像素——这些不是“随机 bug”，而是 vertical-align: baseline 和行内格式化上下文（IFC）共同作用的结果。根本原因不在空格本身，而在浏览器如何计算行框（line box）高度以及基线对齐规则。
为什么 或普通空格会扩大行高
空格字符（包括 ）本身不直接“撑开”间隙，但它参与构成行框。当行内元素（如 img、span、文本）混排时，浏览器必须为整行计算一个统一的行高（line-height），而这个高度由该行中所有元素的“字体度量 + 垂直对齐基准”共同决定。
-
img的基线被规范定义为其底边（margin edge），但文本的基线在字母 x 底部，两者默认对齐后，降部（descender）区域仍保留空间 - 哪怕只加一个空格，只要它属于含降部字体（如默认
font-family: system-ui），就会拉高整行的line-height下限 -
- 若父容器设置了
line-height: 1，空格仍存在，但视觉间隙可能变小——因为行高压缩了，但基线对齐逻辑未变
vertical-align 怎么影响空格与图片共存时的布局
空格本身没有 vertical-align，但它所在行的其他替换元素（如 img）有。一旦你修改了 img 的 vertical-align 值，整行的基线参考系就变了，进而改变空格所处的行框垂直位置。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
vertical-align: baseline（默认）→ 图片底边对齐文本基线 → 空格随文本“站”在基线上，下方留出降部空间 -
vertical-align: middle→ 图片中点对齐文本 x-height 中点 → 行框高度通常减小，空格所在位置上移，底部缝隙收窄 -
vertical-align: text-bottom→ 图片底边对齐文本底边（不是基线）→ 缝隙基本消失，但空格仍在，只是不再“拖后腿” -
vertical-align: top或bottom→ 跳出基线对齐体系，行框高度可能由最高/最低元素决定，空格被“挤”到边缘，容易引发新错位
真正要动的是行框，不是删空格
很多人试图用 white-space: nowrap 或删掉 HTML 中的换行缩进来消除间隙，这治标不治本。空格是否可见、是否参与布局，取决于它是否在行框中被渲染；而行框是否“臃肿”，取决于其中所有内联级元素的对齐策略与字体度量。
立即学习“前端免费学习笔记（深入）”；
- 最稳解法：把
img设为display: block或vertical-align: bottom，让它退出 IFC，不参与行框高度计算 - 次优但灵活：给包含图片和空格的父容器设
font-size: 0，再单独给文字恢复字号——空格字符没了字体度量，行框塌缩 - 慎用：用
line-height: 0直接清空行高，但会导致文字不可读，需配合span显式设置line-height: 1.5 -
margin-right或gap（在 flex 容器中）
基线对齐不是 bug，是排版系统的底层契约；空格也不是敌人，它是行框存在的证据。真正容易被忽略的，是开发者常把“视觉上没空隙”等同于“结构上没行框”——而只要还在 inline 流里，行框就一定存在，它的高度就一定会被最“难搞”的那个元素定义。
