根本原因是html源码空白被解析为文本节点，导致inline/inline-block元素间出现约4px间隙；应删掉标签前后空格、用trim()预处理、改用css布局而非依赖空格。
引入外部文本后出现多余空格，根本原因是HTML源码空白被解析为文本节点
当你用 <script src="..."></script> 或 <link rel="stylesheet"> 引入外部资源时，如果这些标签前后（尤其是 末尾或 开头）存在换行、缩进或空格，浏览器会把它们当作“文本节点”插入到 DOM 中。这类空白节点在 inline 或 inline-block 元素上下文里会渲染成约 4px 的间隙——不是 bug，是 HTML 规范行为。
常见错误现象： 一进来就顶出一段空白；导航栏按钮之间莫名有缝；<img> 下方多出几像素空隙。
- 检查
最后一行和第一行之间有没有换行或空格，删掉 - 检查所有
<script></script>、<link>标签自身前后是否有多余空格，比如<script src="a.js"></script>——开头结尾的空格要清掉 - 若用构建工具（如 Vite/Webpack），确认其 HTML 插件没自动注入空格或注释（某些插件会在
尾部加<!-- injected -->，后面带换行）
动态插入外部 HTML 片段时，innerHTML 会保留源码空格，但不等于能正确渲染
用 fetch() 加载一个 .html 文件，再赋值给 element.innerHTML，里面的空格、缩进、换行全会被原样塞进去。问题在于：这些空白只在行内上下文生效；一旦片段含 <div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 等块级元素，它们之间的换行仍可能触发 inline-block 间隙，尤其当父容器设了 font-size: 16px 且子元素是 display: inline-block 时。
- 不要依赖源码缩进来控制布局，改用 CSS（
flex/grid/margin） - 若必须保留格式（如代码示例），包裹一层
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，并确保white-space: pre-wrap - 用
DOMParser解析后再插入，可跳过文本节点污染：new DOMParser().parseFromString(htmlStr, 'text/html').body.children
<pre class="brush:php;toolbar:false;"></pre> 和 white-space 不是万能解，得看内容类型
<pre class="brush:php;toolbar:false;"></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+, '>（慎用，可能误伤 <code><pre class="brush:php;toolbar:false;"></pre>内容） - Node.js 环境下用
cheerio解析再序列化，比字符串操作更安全
真正麻烦的不是空格本身，而是你把它当成布局手段来用。HTML 的空白折叠机制几十年没变，它不是缺陷，是设计前提——所有依赖空格对齐的写法，迟早会在某个构建步骤、某次 SSR 渲染或某台旧设备上崩掉。
