HTML中直接敲空格会被浏览器折叠为一个，需用 保留空格、<pre>或white-space:pre-wrap等CSS属性控制空白显示，语义与表现层需区分使用。
HTML 里怎么打出“空格”？不是按空格键那么简单
直接在 HTML 源码里敲空格键，浏览器会默认合并成一个普通空格（ 除外）。这是因为 HTML 规范定义了「空白字符折叠」行为：连续的空格、制表符、换行都会被压缩为单个空格，且首尾空格会被忽略。
所以如果你写：
<p>hello world</p>，实际渲染效果等同于
hello world —— 中间四个空格只显示一个。
要保留多个空格或强制换行，得用特殊方式：
-
-
-
<pre>标签：内部所有空白（包括换行和缩进）原样保留，但会用等宽字体，且自带上下外边距 -
<span style="white-space: pre">：局部启用预格式化，比<pre>更灵活
CSS 的 white-space 怎么控制空格显示？
CSS 的 white-space 属性才是决定“空格怎么显示”的核心开关，它覆盖 HTML 默认的折叠行为。常用值有：
立即学习“前端免费学习笔记（深入）”；
-
normal（默认）：空格折叠 + 自动换行 -
nowrap：空格折叠 + 不换行（整行挤在一起，可能溢出容器） -
pre：不折叠空格、不自动换行，换行符生效（类似<pre>） -
pre-wrap：不折叠空格，但允许自动换行（最常用，兼顾可读性和排版） -
pre-line：合并空格，但保留换行符（适合把换行当段落分隔）
例如：
<p style="white-space: pre-wrap">hello world</p>会显示五个空格，且内容超宽时仍能折行。
HTML 空格符号 vs CSS 控制：关键区别在哪？
根本区别在于作用层级和意图：
-
-
white-space是 CSS 属性，属于「表现层」——你是在告诉浏览器“请按这个规则渲染这一块里的所有空白”，它不改变 HTML 内容本身，也不影响语义 - 混合使用时注意优先级：
white-space: normal；而普通空格是否显示，完全由white-space决定 - 性能上无差异，但语义错误会影响可访问性：比如用一堆
margin或text-indent的地方别硬塞空格
什么时候该用 HTML 空格符号？什么时候该用 CSS？
看目的：
- 需要语义化分隔（比如“Mr. Smith”防止姓和名被拆到两行）→ 用
- 需要视觉对齐（比如表格内固定宽度空隙）→ 优先用
padding/width，其次考虑 - 要显示代码、日志、诗歌等需保留原始缩进和换行的内容 → 用
white-space: pre-wrap配合font-family: monospace - 想让一段文字里多个空格生效，又不想改 HTML 源码 → 加 CSS，别往源码里塞一堆
最容易被忽略的一点：服务端模板或 CMS 输出的文本如果含大量空格，前端仅靠 CSS 控制可能不够——得先确认后端是否已把空格转义或过滤。这时候 white-space 再强也救不回被删掉的空格。
