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

一、问题概述：内联元素空白处理与布局意图破坏

HTML 格式化与压缩在处理 Tag 间的空白节点时面临两难：对于块级元素 (<div>, <p>)，插入或剥离换行缩进通常不影响渲染布局；但对于内联块元素 (<span>, <button>, <a>)，源码中的换行符会被浏览器当作空格渲染。盲目剥离空白会导致按钮间距消失，而随意插入换行则会产生意外的字间缝隙。

二、最小复现：移除换行导致 4px 默认间距丢失

下面的示例中，源码中的两个按钮存在换行，浏览器默认渲染约 4px 的空格。压缩工具若强行将其合并为一行，按钮间的间距将瞬间塌陷。

<!-- 源码格式：两个内联按钮之间有换行，渲染时存在默认视觉间距 -->
<button>确认</button>
<button>取消</button>

<!-- 盲目压缩产物：剥离换行后导致按钮紧贴在一起 -->
<button>确认</button><button>取消</button>

三、根因分析：CSS 文本折叠与 DOM 文本节点渲染规则

根据 CSS Text Module 规范，DOM 树中位于 inline 或 inline-block 容器内部的连续空白字符（换行、制表符、空格）在默认 white-space: normal 下会被合并压缩为一个标准空格字符。格式化与压缩工具如果不具备 CSS 上下文或标签 Display 模式的认知，就会破坏原有的文本排版逻辑。

四、推荐方案：区分元素 Display 属性与解耦布局间距

1. 在格式化工具配置中开启内联标签保护模式，对 <span>、<button>、<a> 等标签之间的空白保持原样。2. 工程化避坑：避免依赖 HTML 源码空白产生物理间距，推荐使用 Flexbox/Grid 的 gap 属性或外边距 (margin) 显式控制间距。3. 使用 CSS font-size: 0 或 letter-spacing 消除不确定的空白折叠影响。

五、完整代码：判断相邻标签的内联属性与空白保护策略

下面的 TypeScript 函数演示如何根据 HTML 标签的默认 Display 模式，判定格式化与压缩阶段是否需要保护相邻元素之间的空白节点。

type DisplayMode = "block" | "inline" | "inline-block";

const INLINE_TAGS = new Set(["span", "a", "b", "i", "strong", "em", "img", "button", "input"]);

function getDisplayMode(tag: string): DisplayMode {
  if (INLINE_TAGS.has(tag.toLowerCase())) return "inline-block";
  return "block";
}

function preserveWhitespaceBetweenInline(tag1: string, tag2: string): boolean {
  const mode1 = getDisplayMode(tag1);
  const mode2 = getDisplayMode(tag2);
  // 当两个相邻元素均为 inline/inline-block 时，格式化/压缩不得盲目剥离它们之间的间距
  return mode1 !== "block" && mode2 !== "block";
}

console.log(preserveWhitespaceBetweenInline("button", "button")); // true (保护空白)
console.log(preserveWhitespaceBetweenInline("div", "div")); // false (块级元素可安全换行缩进)

六、常见错误方案

误以为 HTML 压缩可以安全应用于任何标签；将所有 HTML 换行统一删除导致文本与内联元素粘连；依赖源码换行来维持生产环境组件间距而非使用 CSS 控制。

七、边界条件：white-space 样式覆盖与 pre 格式化块

若元素被赋予 white-space: pre 或 pre-wrap，任何空白（包括空格与换行）都会被严格按字面量渲染；<pre> 与 <textarea> 内部绝不可做任何格式化或换行调整。

八、如何验证空白折叠安全性

对比格式化/压缩前后的浏览器实际渲染；用 DOM 测试断言 textContent、行内元素间隙、pre 与 textarea 内容保持不变，并为关键页面建立视觉回归基线。

九、FAQ

问：HTML Formatter 应该把每个 Tag 都换行吗？答：不行，内联元素（如 <span> 或 <a>）换行会引入意外空格，必须保持内联或遵循保护规则。

问：为什么 display: inline-block 元素之间会有 4px 缝隙？答：因为源码中标签之间的换行和缩进空格被浏览器依据 whitespace 折叠规则渲染为一个空格。

问：消除 inline-block 缝隙的最佳 CSS 方案是什么？答：现代前端首选 Flexbox 布局配合 gap 属性，彻底脱离源码空白的干扰。

十、总结

HTML 格式化与压缩必须尊重浏览器空白折叠规则。内联与内联块元素间的空白具有文本渲染语义，工程上应通过 CSS 布局解耦对源码空白的依赖。