图片底部空白等布局问题源于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 DHTML 页面生成器

生成可在 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 流里，行框就一定存在，它的高度就一定会被最“难搞”的那个元素定义。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！