HTML解析器将标签间换行和空格折叠为一个空格，并在行内格式化上下文中渲染为约4px间隙；等特殊标签保留空白，动态插入无间隙因未生成空白文本节点，验证需检查DOM中nodeType为3的空文本节点。
HTML解析器怎么处理标签间的换行和空格
浏览器不是“忽略”空格，而是按规范把连续空白字符（\n、\t、 ）折叠成一个空格，并仅在**行内格式化上下文**中渲染它。这意味着：
– <div></div>
<div></div> 之间换行 → 生成一个空的 Text 节点，但因父容器是块级，默认不渲染这个空格
– <span></span><span></span> 或 <button></button><input> 之间换行 → 父容器若为 inline/inline-block 上下文，该空格会被当作字符渲染，宽度 ≈ 当前 font-size × 0.25（典型值约 4px）
– <pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style> 内部空白完全保留，不折叠
为什么动态插入 HTML 没有间隙而静态写法有
根本差异不在 JS 或 jQuery，而在字符串内容本身是否含空白字符：
– 静态 HTML 中换行缩进 → 解析器生成带 \n 的 Text 节点 → 在 inline-block 容器中被渲染为间隙
– 动态拼接用模板字符串连写：`<button><input><button>`</button></button> → 不产生任何 Text 节点 → 无间隙
– 但若动态拼接时用了 += 多行字符串或没注意引号内换行，照样会引入空格节点
如何验证 DOM 中是否残留空文本节点
打开开发者工具 → 选中父容器 → 切到 Console，执行：Array.from($0.childNodes).filter(n => n.nodeType === 3 && !n.textContent.trim()).length
返回大于 0，说明存在纯空白 Text 节点。
进一步看：$0.childNodes.forEach((n, i) => console.log(i, n.nodeType, `'${n.textContent}'`))
就能看到哪些位置藏了 '\n ' 这类节点。注意：element.normalize() 可合并相邻 Text 节点并移除空节点，但它不会影响已渲染的布局，只作用于 DOM 结构。
font-size: 0 方案的真实限制
设父容器 font-size: 0 是最常用解法，但有三个易漏细节：
– input[type="number"] 的增减按钮图标可能变小或错位，需额外重置 appearance: auto 或用 zoom
– Chrome 对小于 12px 的字号有强制最小限制，得加 -webkit-text-size-adjust: none
– 若子元素用了 em 单位做 padding/margin，会继承 0 → 全部失效，建议统一改用 rem 或像素值
– vertical-align: middle 必须显式设置，否则 inline-block 元素基线对齐仍可能造成视觉错位
立即学习“前端免费学习笔记（深入）”；
真正难缠的不是“怎么加空格”，而是“怎么让浏览器别把换行当空格”。所有方案本质都是绕开 HTML 解析器的默认折叠行为——要么删掉空白源码，要么让空白失去渲染能力，要么换掉渲染上下文（比如改用 flex）。一旦用了 inline-block，就等于主动邀请解析器把换行变成像素。这点，无论你用 Vue、React 还是原生 JS 插入，都逃不掉。
