HTML解析阶段即完成空白合并，DOM中已无原始空格与换行；浏览器在构建DOM树时将连续空白字符（空格、\t、\n、\r）统一压缩为单个空格，该操作不可逆，CSS white-space仅影响渲染，无法恢复已丢失的空白。
HTML解析阶段就完成空白合并，DOM里没有原始换行
浏览器在构建DOM树时，就已经把源码里的连续空格、\t、\n、\r全压缩成单个空格——这个动作发生在解析阶段，不是渲染时才处理。所以哪怕你用textContent读取，拿到的也是被“抹平”后的字符串。
常见错误现象：document.querySelector('p').textContent返回"Hello World"，即使源码写的是<p>Hello</p><p>World</p>中间换行加缩进；又或者<div class=" container main ">，属性值里的空格也被压成class="container main"。
- 所有文本节点内的空白（包括元素开头/结尾的缩进）都会被合并
- 这个行为无法通过CSS逆转，因为DOM结构里已经没有原始空白了
-
<pre>能“看起来”保留格式，靠的是white-space: pre在渲染阶段排版，不是DOM里还存着换行符
inline-block间隙不是CSS bug，是HTML把换行当空格字符
两个<div>标签之间换行或空格，会被解析器当成一个U+0020空格字符参与行内布局——它有字体大小、有宽度，但inspect时看不到margin/padding，只在父容器的行框里悄悄占位。
常见错误现象：明明没设任何间距，display: inline-block的按钮却隔开几像素；加上vertical-align: baseline后右侧元素还往下掉——那是因为基线对齐和空白字符叠加造成的。
立即学习“前端免费学习笔记（深入）”；
-
font-size: 0可让空白“缩没”，但必须给每个含文本的子元素显式重置font-size -
<input>、<button>等替换元素不继承font-size，需单独处理 - 现代项目优先用
display: flex，gap控制间距，align-items统一垂直对齐，彻底绕过空白问题
<pre>和white-space只影响渲染，不恢复已丢失的空白
<pre>标签默认带white-space: pre，但它不改变DOM结构，只是告诉浏览器：“如果DOM里有\n，就按原样排版”。如果JS拼接字符串时根本没加\n，<pre>也救不回来。
常见错误现象：<pre>foobar</pre>照样挤在同一行；又或者用<pre>展示用户输入内容，结果换行失效——因为后端返回的字符串里本来就没有\n。
-
white-space: pre-wrap最常用：保留空白和换行，同时允许自动换行 -
white-space: pre-line适合富文本：合并多余空格，但保留换行符并换行 -
<pre>本质是语义化标签，表示“预格式化文本”，别拿它给正文加缩进或做视觉对齐
用<br>还是white-space，取决于内容是否可控
<br>是结构性换行，插入一个具体的换行动作；white-space是渲染规则，由文本本身和容器宽度共同决定换行位置。两者机制完全不同。
常见错误现象：在用户评论区硬塞<br>，结果XSS过滤后标签被转义，换行全失效；又或者对动态JSON日志用<pre>但没配white-space: pre-wrap，长行直接撑破容器。
- 诗歌、地址等静态内容，且换行位置固定 → 用
<br> - 用户输入、API返回、富文本编辑器输出 → 用
white-space: pre-line或pre-wrap - 需要精确控制某处断行（如防止“Mr. Smith”被拆开）→ 用
