HTML元素换行书写出现额外空格，代码压缩后空格消失如何解决？

这个现象的本质是行内/行内块级元素之间的换行、缩进字符会被浏览器解析为1个半角空格，代码压缩时这类空白字符会被直接删除，就会导致原本的间距消失，可通过以下几种方案解决：

1. 最稳妥：CSS控制间距（完全不受压缩影响） #

• 放弃依赖空白节点产生的默认间距，直接给对应元素设置margin属性手动控制间距，示例代码：

button {
  margin-right: 4px;
}
button:last-child {
  margin-right: 0;
}

• 父元素使用Flex布局，自动忽略元素间的空白节点，再通过gap属性手动控制间距：

.btn-container {
  display: flex;
  gap: 4px; /* 直接自定义子元素之间的间距 */
}

• 临时兼容方案：给父元素设置font-size: 0，再给子元素重新设置正确的字体大小，空白节点作为文本节点会因为字体大小为0不可见：

.btn-container {
  font-size: 0;
}
.btn-container button {
  font-size: 14px; /* 还原实际需要的字体大小 */
}

2. HTML书写层面兼容（适合不想改CSS的场景） #

• 标签错位书写，把换行放在尖括号外侧，避免产生空白文本节点：

<button>Button 1</button
><button>Button 2</button>

• 用注释填充换行位置，抵消空白节点：

<button>Button 1</button><!--
--><button>Button 2</button>

注意：该方案如果压缩时开启了删除注释的配置，会直接失效。

3. 压缩工具配置适配 #

如果你正在使用构建工具做代码压缩，可以通过修改压缩规则保留行内元素间的空格，以常用的html-minifier-terser为例，调整如下配置即可：

// html-minifier-terser 配置示例
const htmlMinifyOptions = {
  collapseWhitespace: true,
  conservativeCollapse: true, // 保留1个空格，不会完全删除行内元素间空白
  collapseInlineTagWhitespace: false // 禁止合并行内标签之间的空白
}

内容的提问来源于stack exchange，提问作者FunnelScr