HTML 格式化与压缩：空白折叠 (Space Collapse) 与 inline-block 布局间距处理

一、问题概述

格式化只应整理源码，但标签之间的空白可能参与行内排版。本文排查两个按钮的间距变化，分别验证 DOM 文本、CSS 布局和几何位置；不把标签名当作实际 display 的替代。

二、最小复现

将下面片段保存为 HTML 并在浏览器打开。第一行在按钮之间保留一个 ASCII 空格，第二行没有，第三行用 Flexbox gap 显式定义间距。不要从源码长度猜测像素结果。

<style>
  .inline button { display: inline-block; margin: 0; font: inherit; }
  .row { font: 16px Arial; white-space: normal; }
  .flex { display: flex; gap: 8px; }
</style>
<div id="with-space" class="row inline"><button>A</button> <button>B</button></div>
<div id="without-space" class="row inline"><button>A</button><button>B</button></div>
<div id="with-gap" class="row flex"><button>A</button> <button>B</button></div>

三、根因分析

空白处理由 CSS Text 规则及 white-space 等样式决定，而不是 HTML 标签名独立决定。display: inline-block 的相邻盒子之间，文本空格通常产生字形宽度；其大小受字体、字号及布局影响，没有固定的 4px 默认值。换行的转换还与语言和上下文有关，不能断言所有换行都变成空格。

四、推荐方案

按钮组可用 Flexbox/Grid gap 表达布局间距；正文行内内容仍应保留有意义的空格。只能在掌握完整 CSS 与实际排版时判断某段空白能否改变。本站 /tools/format/html-formatter 提供格式化和对比案例，输出仍需在目标页面验证。

五、完整代码

在第二节页面的浏览器控制台执行下列 TypeScript 转译后的代码，或先去掉参数类型。它读取实际样式和位置，返回观察数据，不充当自动压缩器。getBoundingClientRect 的差值只有在本示例的横向、同一行且无变换条件下才表示间隙。

function inspectRow(root: HTMLElement) {
  const buttons = root.querySelectorAll('button');
  if (buttons.length !== 2) throw new Error('Expected two buttons');
  const first = buttons[0].getBoundingClientRect();
  const second = buttons[1].getBoundingClientRect();
  return {
    text: root.textContent,
    display: getComputedStyle(root).display,
    whiteSpace: getComputedStyle(root).whiteSpace,
    gapPx: second.left - first.right,
  };
}

for (const id of ['with-space', 'without-space', 'with-gap']) {
  const root = document.getElementById(id);
  if (!(root instanceof HTMLElement)) throw new Error(`Missing ${id}`);
  console.log(id, inspectRow(root));
}

六、常见错误方案

错误一：按 div/span 白名单决定是否保留空白，遗漏 CSS 的 display 覆盖。错误二：把 4px 当作规范常量。错误三：删除所有标签间文本，可能把英文单词粘连。font-size: 0 会被后代继承，若采用旧布局方案，必须恢复子元素字号并检查文本。

七、边界条件

white-space: pre、pre-wrap 与 break-spaces 等会保留更多空白；pre/textarea 内容应单独保护。display: none、换行、RTL、垂直书写、transform、margin 和响应式 CSS 会改变几何测量含义。Flex/Grid 的空白文本与普通行内排版也不能混为一谈。

八、如何验证

本复现应观察到：第一行有字体决定的间隙，第二行接近零，第三行由 gap 得到 8px。改变字号后重新测量；给 div 设置 display: inline-block 证明标签名不能决定布局。分别比较文本值和渲染，不把单一 textContent 相同当作视觉等价。

九、FAQ

问：所有标签都应单独换行吗？答：不应，插入空白可能影响行内文本。

问：为什么不是固定 4px？答：空格的字形宽度依赖字体和字号。

问：gap 能保护 pre 内文本吗？答：不能，它控制布局间距，与预格式化文本内容是不同问题。

十、总结

先定位空白文本，再检查实际 CSS 和排版。按钮组使用显式 gap，行内正文保留语义空白，最后在目标视口对比输出。继续阅读 /articles/html-formatter-script-style-indentation-engine 检查嵌入代码边界，或 /articles/html-formatter-seo-semantic-cleanliness 核对结构。