HTML空格问题本质是浏览器解析空白字符的规则，而非排版技巧：解析阶段即合并连续空白为单个空格，仅<pre>等少数标签及white-space: pre-wrap等CSS可保留格式， 仅适用于语义上不可折行的单个空格场景。
别从学空格开始——HTML空格问题本质是「浏览器如何解析空白字符」，不是排版技巧题。真正卡住人的，从来不是“怎么打三个空格”，而是不知道该用 还是 white-space: pre-wrap，更不知道为什么用了 后文字在小屏上溢出了。
什么时候必须用 ，而不是 CSS？
只在需要「单个、不可折行、语义上属于文本内容一部分」的空格时才用 。比如防止 “Fig. 12” 被拆成两行，“100 km/h” 中单位和数值不分离。
- 连续写多个
-
- 中文场景慎用：全角空格
white-space 哪个值该优先选？
日常开发中，white-space: pre-wrap 是最安全的通用解。它保留所有空格和换行，又允许内容在容器边界自动换行——既不像 pre 那样强制单行溢出，也不像 pre-line 那样吃掉你特意敲的多个空格。
-
pre只适合真·代码块：它禁用自动换行，超宽内容会拖出滚动条，且默认等宽字体，强行套在正文段落里风格割裂 -
pre-line看似“智能”，实则危险：它把连续空格全合并，只认换行符。你写姓名： 张三，它照样给你压成一个空格 - 别给整页
body设white-space：这个属性作用于元素内部文本流，设在顶层会干扰所有内联元素的默认换行行为
为什么 <pre> 标签不能当“空格万能胶”用？
<pre> 的语义是「预格式化文本」，不是「我要多几个空格」。浏览器对它的处理非常刚性：保留所有空白、禁用换行、应用 font-family: monospace 默认样式。
立即学习“前端免费学习笔记（深入）”；
- 直接把按钮文字包进
<pre>，会导致点击区域变窄（等宽字体字宽大）、颜色继承异常、无障碍属性丢失 - 想靠
<pre>实现居中缩进？它不会响应text-align或padding，只能靠内部加 - 真要显示代码，请配合 CSS 重置：
pre { font-family: inherit; white-space: pre-wrap; margin: 0; }，否则等宽字体+默认外边距会破坏页面节奏
最常被忽略的点：空格问题往往暴露的是结构设计缺陷。比如用一堆 对齐表格内文字，其实该用 table-layout: fixed + text-align；用 <pre> 撑开卡片高度，不如检查 min-height 和 flex 容器是否配置正确。空格只是表象，DOM 结构和 CSS 布局才是根因。
