根本原因是HTML源码空白被解析为文本节点，导致inline/inline-block元素间出现约4px间隙；应删掉标签前后空格、用trim()预处理、改用CSS布局而非依赖空格。
引入外部文本后出现多余空格，根本原因是HTML源码空白被解析为文本节点
当你用 <script src="..."></script> 或 <link rel="stylesheet"> 引入外部资源时，如果这些标签前后（尤其是 <head> 末尾或 <body> 开头）存在换行、缩进或空格，浏览器会把它们当作“文本节点”插入到 DOM 中。这类空白节点在 inline 或 inline-block 元素上下文里会渲染成约 4px 的间隙——不是 bug，是 HTML 规范行为。
常见错误现象：<body> 一进来就顶出一段空白；导航栏按钮之间莫名有缝；<img> 下方多出几像素空隙。
- 检查
<head>最后一行和<body>第一行之间有没有换行或空格，删掉 - 检查所有
<script>、<link>标签自身前后是否有多余空格，比如<script src="a.js"></script>——开头结尾的空格要清掉 - 若用构建工具（如 Vite/Webpack），确认其 HTML 插件没自动注入空格或注释（某些插件会在
<head>尾部加<!-- injected -->，后面带换行）
动态插入外部 HTML 片段时，innerHTML 会保留源码空格，但不等于能正确渲染
用 fetch() 加载一个 .html 文件，再赋值给 element.innerHTML，里面的空格、缩进、换行全会被原样塞进去。问题在于：这些空白只在行内上下文生效；一旦片段含 <div>、<p> 等块级元素，它们之间的换行仍可能触发 inline-block 间隙，尤其当父容器设了 font-size: 16px 且子元素是 display: inline-block 时。
- 不要依赖源码缩进来控制布局，改用 CSS（
flex/grid/margin） - 若必须保留格式（如代码示例），包裹一层
<pre><code>...</code></pre>，并确保white-space: pre-wrap - 用
DOMParser解析后再插入，可跳过文本节点污染：new DOMParser().parseFromString(htmlStr, 'text/html').body.children
<pre> 和 white-space 不是万能解，得看内容类型
<pre> 会让所有空格、制表符、换行都原样显示，但它强制等宽字体 + 块级行为 + 默认外边距，不适合普通段落。而 CSS 的 white-space 属性更灵活，但容易误配：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre→ 换行和空格都保留，但不折行，超宽直接溢出 -
white-space: pre-wrap→ 推荐用于用户提交的富文本，保留换行与空格，同时允许折行 -
white-space: pre-line→ 合并连续空格，只保留换行符，适合日志类文本 - 千万别对按钮或链接文字设
white-space: nowrap还指望中间空格有效——它会把多个空格压成一个
服务端返回的 HTML 片段带空格？优先用 trim() 预处理
从 API 或模板引擎拿到的 HTML 字符串，常因服务端渲染逻辑在开头/结尾混入空格、换行或 BOM 字符。直接 el.innerHTML = htmlStr 就会引入不可见但可渲染的空白节点。
- 插入前先
htmlStr.trim()，去掉首尾空白（注意：这不会影响内部结构） - 若需保留内部缩进但剔除无意义换行，可用正则清理：
htmlStr.replace(/>\s+</g, '><')（慎用，可能误伤<pre>内容） - Node.js 环境下用
cheerio解析再序列化，比字符串操作更安全
真正麻烦的不是空格本身，而是你把它当成布局手段来用。HTML 的空白折叠机制几十年没变，它不是缺陷，是设计前提——所有依赖空格对齐的写法，迟早会在某个构建步骤、某次 SSR 渲染或某台旧设备上崩掉。
