html标签间换行会产生不可见空格文本节点，在inline-block等行内上下文中渲染为约4px间隙；可通过删空白、注释隔断或font-size:0等方案解决。

为什么换行会产生空格 浏览器把 HTML 源码中标签之间的换行符、制表符、空格统一解析为一个文本节点，内容就是那个“看不见的空格”。它只在行内上下文（如 、、、）中渲染成可见间隙；块级元素之间一般不显，但一旦设了 display: inline-block，这个空格立刻变成约 4px 的横向间距——不是 margin，没法用 devtools 直接选中，排查时容易误判。

常见错误现象：

• 多个 <button></button> 换行写，按钮间出现无法用 margin 解释的缝隙
• <sup></sup> 或 <sub></sub> 单独换行，导致上标前多出一格距离
• 用 innerHTML 动态插入带换行的字符串，结果比手写紧凑 HTML 多出空隙

删空白 or 注释隔断：最直接的静态解法 不改 CSS、不依赖 JS，靠调整 HTML 源码本身就能根除。适用于构建时可控、内容不常变的场景。

可选方案：

• 把标签写成一行：<div> <span>A</span><span>B</span> </div> —— 简单有效，但可读性差
• 用 HTML 注释“吃掉”换行：<span>A</span><!-- --><span>B</span> —— 保留缩进逻辑，兼容所有浏览器
• 闭合标签紧贴下个开始标签：<div>A</div> <div>B</div>（即不换行），比注释更轻量

font-size: 0 是 inline-block 间隙的通用止痛药 当必须保留源码换行、又用了 display: inline-block 时，这是最稳妥的兜底方案。

注意点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 父容器设 font-size: 0，子元素必须显式重置字号，例如 font-size: 16px
• 若子元素含嵌套文本或伪元素（如 ::before），需确保它们也继承或设置了非零字号
• 不要在全局 body 或高阶容器上滥用，否则可能意外影响按钮文字、图标字体等

white-space 不解决标签间空格，别用错地方white-space 控制的是**元素内部文本节点的空白行为**，不是标签之间的空白。把它加在父容器上，对 <button><button></button></button> 之间的空格完全无效。

典型误用：

• 给 <div class="btn-group"> 加 <code>white-space: nowrap，指望消除按钮间隙 → 实际只是让内部文字不换行，空隙照旧
• 对动态插入的 HTML 字符串先套 white-space: pre 再渲染 → 可能导致整个区域排版崩坏，且不治本

真正该用 white-space 的地方是：显示日志、代码片段、地址字段这类含原始换行/空格的文本内容。

最容易被忽略的一点：inline 元素间的空格宽度取决于父容器当前的 font-size 和字体度量，不是固定像素值。所以用负 margin 去抵消（比如 margin-left: -4px）在不同字号或字体下会失效，不可靠。