1. 问题现象与背景
在Web开发中，我们经常会遇到使用JavaScript动态生成DOM元素与直接在HTML中定义的模板元素在视觉上表现不一致的情况，即使它们拥有相同的CSS类。一个常见的例子是在待办事项列表中，当通过JavaScript添加新任务时，新任务的按钮组之间没有额外的空白，而HTML中预定义的“模板任务”的按钮组之间却存在明显的间距。即使尝试对父容器应用white-space: break-spaces;等CSS属性，这种差异也可能依然存在，甚至只对模板元素生效。
这个问题通常源于对CSS white-space属性及其与HTML源代码中空白字符交互方式的误解。
2. 深入理解 white-space 属性
CSS white-space属性用于控制元素内部空白字符（包括空格、制表符、换行符）的处理方式。其默认值是normal，这意味着：
- 连续的空白字符（空格、制表符）会被合并为一个空格。
- 文本会自动换行以填充行框。
- 换行符会被视为一个空格。
然而，当white-space属性被设置为其他值时，行为会发生显著变化：
立即学习“前端免费学习笔记（深入）”；
-
pre: 行为类似于HTML的
标签。空白字符序列会被保留，文本只在源代码中的换行符或
标签处换行。 - pre-wrap: 空白字符序列会被保留。文本在源代码中的换行符、
标签处以及必要时（为了填充行框）换行。 - pre-line: 空白字符序列会被合并为一个空格。文本在源代码中的换行符、
标签处以及必要时换行。 - break-spaces: 行为与pre-wrap类似，但有一个关键区别：任何保留的空白序列都可以在其中断行。这意味着，如果一行文本中有多个连续的空格，浏览器可以在这些空格之间断开。
关键洞察： HTML源代码中的缩进、换行等格式化字符，在浏览器解析时，会被识别为文本节点中的空白字符。如果一个元素内部的white-space属性设置为pre-wrap或break-spaces，这些由源代码格式化引入的空白字符就会被保留并渲染出来。
3. HTML结构与DOM渲染差异
当我们在HTML中编写如下结构时：
在
