HTML中敲空格需用不间断空格（ ），它不被合并、不折行；多空格场景推荐CSS white-space: pre-wrap；React/Vue中需注意实体写法，避免解析错误。
HTML里怎么敲一个空格？直接按空格键没用
浏览器会把连续的空白字符（空格、换行、制表符）全部压缩成一个空格，所以敲十下空格键，页面上只显示一个。真要“看到”空格，得用 html 实体或 css 控制。
最常用的是 —— 不间断空格（non-breaking space）。它不会被浏览器合并，也不会在行尾被折行吞掉。
-
100 px） - 别用
- 千万别写
想控制多个空格？CSS 的 white-space 更靠谱
如果一段文字里要保留原始缩进或对齐（比如代码片段、诗歌排版）， 写十个太傻，也难维护。这时候该让 CSS 出场。
给容器加 white-space: pre-wrap;，就能让里面的空格、换行都原样呈现，同时又支持自动换行。
-
pre：保留空格和换行，但不自动换行（容易撑破容器） -
pre-wrap：推荐首选，兼顾可读性和响应式 -
white-space: break-spaces;是新标准，但 Safari 旧版本不支持，线上慎用
React/Vue 里写 要小心语法陷阱
JSX 和 Vue 模板对 HTML 实体的解析方式不同，直接写 可能报错或被当成纯文本。
立即学习“前端免费学习笔记（深入）”；
- React 中必须写成
{"\u00a0"}或{String.fromCharCode(160)}，不能直接写 - Vue 模板里
v-html绑定的内容里会被转义，得用v-html="'100 px'"这种字符串拼接 - 更稳妥的做法：用
margin-left或padding替代视觉空隙，语义更干净
空格太多导致布局错乱？先查是不是 font-family 搞的鬼
中文字体和英文字体对空格的渲染宽度差异很大。比如 font-family: "PingFang SC", sans-serif; 下， 可能比预期宽一倍；而用 Consolas 就很窄。
- 用浏览器开发者工具选中空格元素，看 computed 样式里的
width，常会发现是字体决定的 - 如果必须靠空格对齐，优先用等宽字体 +
monospace声明，避免混用中英字体 -
