inline元素间空隙是HTML解析器将换行/空格转为文本节点所致，宽度约4px；最稳方案是父容器设display:flex，子元素自动无缝排列且兼容性好。

HTML内联元素（如 、、）之间出现意外空隙，不是 bug，是规范行为——浏览器会把源码里的换行、缩进、空格解析为一个空白字符，并渲染成约 4px 的间隙。想真正无缝排列，得绕过文本渲染逻辑。

为什么 inline 元素间总有看不见的空隙

只要两个 写在不同行或中间有空格，浏览器就按“单词间距”处理，哪怕 CSS 设了 font-size: 0 或 letter-spacing: -4px，也可能因小数像素截断残留 0.5px 缝。这不是 bug，是 HTML+CSS 渲染流程决定的：先解析空白，再排版，最后绘制。

最稳的无缝方案：display: flex 替代 inline

把父容器设为 display: flex，子元素自动无视源码空格。这是目前兼容性好、无副作用、无需 hack 的首选方式。

• 父元素加 display: flex，子元素默认横向排列，间隙归零
• 若需换行，加 flex-wrap: wrap；若需对齐，用 justify-content 和 align-items
• 注意： 在 flex 下默认基线对齐，可能留白，统一加 vertical-align: top 或 align-self: flex-start
• 不推荐用 float: left，清除浮动麻烦，且已属过时布局模式

不得已用 inline 时的缝合技巧

某些场景必须保留 display: inline（比如富文本编辑器输出、第三方组件封装限制），这时只能从源头压缩空白：

DeepBI DHTML 页面生成器

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

下载

• 把所有子标签写在同一行，中间不留空格或换行：ABC
• 用 HTML 注释吞掉换行：A-->B-->C（注释本身不渲染）
• 父元素设 font-size: 0，子元素重设 font-size；但要注意 line-height 可能继承 0 导致内容塌陷，需显式恢复
• 标签后紧跟 换行也会出缝，建议统一写成单标签形式并紧贴：

图片 inline 排列时的额外坑

是替换元素，默认按基线（baseline）对齐，下方会留出字母 g、j 的下沉空间，造成视觉“下坠感”，看起来像有缝隙。

• 加 vertical-align: middle 或 top 可消除底部空白
• 更彻底的做法：父容器设 line-height: 0，再给 单独设 vertical-align: top
• 如果图片尺寸不一致，flex + align-items: flex-start 比任何 inline 修复都可靠

真正难的不是怎么填缝，而是判断该不该用 inline —— 大多数所谓“无缝排列”需求，本质是布局问题，不是文本格式问题。用 flex 就别回头折腾空格，否则调试成本远高于重构一行 display 声明。

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