是html中唯一稳定插入单个不可折叠空格的实体，用于防止断行或微调间距，但不可滥用作缩进；语义化布局应优先使用css的margin/padding或white-space属性。
用 插入单个不间断空格
HTML 默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，所以直接敲多个空格键没用。 是唯一能稳定插入一个不可折叠空格的实体字符。它常用于中英文混排时防止断行，或在按钮文字前加小间隙。
常见错误是把它当“缩进工具”滥用：比如用 10 个 对齐文本——这会让 HTML 膨胀、语义混乱，且响应式下完全失控。
- 只在语义需要“此处必须有一个空格且不能被压缩”时使用，例如：
Mr. Smith - 避免连写多个：
- 它不会继承父元素的
font-size缩放，但会受line-height影响
用 style="margin" 或 style="padding" 控制块级/内联元素间距
真正可控、可响应、符合现代布局逻辑的方式，是给元素加 CSS 间距。空格本质是视觉距离问题，不是字符问题。
比如想让两个 <span></span> 之间留出 12px 空隙，不要用 堆，而应：
<span style="margin-right: 12px;">左文本</span> <span>右文本</span>
注意：对 <span></span> 这类内联元素，margin-top/bottom 通常无效；padding 则始终生效，但会撑大背景区域。
-
margin适合分离兄弟元素（如按钮之间） -
padding适合扩大元素自身可点击/可交互范围 - 用
rem或em单位比固定px更利于缩放适配
用 white-space 控制文本内空格渲染行为
当一段预格式化文本（如代码片段、诗歌）里的空格、换行需要原样显示，就得改 white-space CSS 属性，而不是手动插 。
默认值 white-space: normal 会折叠空格；换成 pre 或 pre-wrap 就能保留所有空白符。
-
white-space: pre—— 保留空格和换行，不自动换行（内容超宽会溢出） -
white-space: pre-wrap—— 保留空格和换行，且允许自动换行（更常用） - 不要在正文段落上设
pre，会导致中文段落无法根据容器宽度折行
避免用 <pre class="brush:php;toolbar:false;"></pre> 标签只为调空格
<pre class="brush:php;toolbar:false;"></pre> 的语义是“预格式化文本”，浏览器会默认用等宽字体、保留所有空白。如果只是想让两词之间空两格，却套个 <pre class="brush:php;toolbar:false;"></pre>，就污染了语义，还可能触发意外样式（比如 font-family: monospace）。
更隐蔽的问题是：某些 CSS 框架（如 Bootstrap）会对 <pre class="brush:php;toolbar:false;"></pre> 设全局 margin 和 overflow，导致布局偏移。
- 只在展示代码、ASCII 图、日志等真正需要保留原始缩进的场景用
<pre class="brush:php;toolbar:false;"></pre> - 若只是临时调试想看空格是否生效，可用浏览器开发者工具临时加
white-space: pre查看，别直接写进 HTML - 用
<code>包裹内联代码片段，它语义正确且默认有基础样式
，只要父容器设了 text-align: justify 或用了 Flex 布局，它们照样会被挤压或拉伸。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
