这是HTML规范对空白字符的默认渲染行为，浏览器将换行符、空格等合并为一个空格显示；推荐用display: flex配合gap解决，兼容性好且不破坏代码可读性。

为什么

里的 之间会有空白间隙

这不是 bug，是 HTML 规范对“空白字符”的默认渲染行为。当多个 标签写在不同行、或中间有空格/换行时，浏览器会把它们之间的空白（包括换行符、制表符、空格）合并成一个空格显示——这个空格就撑开了元素间距。

用 display: flex 直接绕过空白处理

这是最推荐的做法：让父容器（比如

或

）变成 Flex 容器，子项（ 或

）的空白就不再参与布局计算。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<nav class="breadcrumb"><ol style="display: flex; gap: 8px;">
<li><a href="/">首页</a></li>
    <li><a href="/cat">分类</a></li>
    <li><a href="/item">商品</a></li>
  </ol></nav>

• gap 控制项间距离，比手动设 margin 更干净，且不干扰第一个/最后一个元素
• 兼容性足够好：Chrome 84+、Firefox 63+、Safari 14.1+ 都支持 gap（旧版 Safari 可用 margin-right + :last-child 回退）
• 不需要改 HTML 结构，也不用删换行——代码可读性不受影响

如果必须用 inline-block，记得注释掉换行

老项目可能还在用 display: inline-block 布局面包屑，这时空白间隙无法避免，只能靠“消灭空白字符”来解决。

• 把所有
• 写在同一行：
• ...
• ...
• 或用 HTML 注释“吃掉”换行：
• ...

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