这是HTML规范对空白字符的默认渲染行为，浏览器将换行符、空格等合并为一个空格显示；推荐用display: flex配合gap解决，兼容性好且不破坏代码可读性。
为什么 <nav></nav> 里的 <a></a> 之间会有空白间隙
这不是 bug，是 HTML 规范对“空白字符”的默认渲染行为。当多个 <a></a> 标签写在不同行、或中间有空格/换行时，浏览器会把它们之间的空白（包括换行符、制表符、空格）合并成一个空格显示——这个空格就撑开了元素间距。
用 display: flex 直接绕过空白处理
这是最推荐的做法：让父容器（比如 <nav></nav> 或 <ol></ol>）变成 Flex 容器，子项（<a></a> 或 <li>）的空白就不再参与布局计算。
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 布局面包屑，这时空白间隙无法避免，只能靠“消灭空白字符”来解决。
- 把所有
<li>写在同一行：<li>...</li> <li>...</li> - 或用 HTML 注释“吃掉”换行：
<li>...</li>
