html中普通空格会被浏览器自动合并为一个，需用 实现不可折叠空格；多空格场景推荐white-space: pre-wrap，元素间距优先用css的margin/padding。
HTML里普通空格会被自动合并
浏览器默认会把连续的多个空格、换行、制表符全部压缩成一个空格，这是HTML规范定义的“空白符折叠”行为。所以直接敲两个空格键，页面上只显示一个。
用 实体实现可控空格
是不间断空格（non-breaking space）的HTML实体，它不会被折叠，也不会换行。需要几个空格就写几个 ：
<p>姓名：</p><p>张<code> </code>三</p>
上面代码会在“张”和“三”之间渲染出三个不可折叠的空格。
- 每个
- 不适合大段排版，纯靠堆
- 在语义化要求高的场景（比如表格对齐、代码片段），这不是最佳选择
用CSS的white-space控制空白行为
更灵活的方式是用 white-space 属性改变父容器的空白处理规则：
<p style="white-space: pre">张 三</p>
其中 pre 值会让所有空白符（包括空格、换行）原样保留；其他常用值有：
-
pre-wrap：保留空格和换行，但允许自动换行（推荐用于用户输入内容） -
pre-line：合并空格，但保留换行 -
break-spaces（较新）：保留空格且允许在空格处断行
注意：white-space: pre 下的空格宽度仍受字体影响，等宽字体下对齐更可靠。
用margin或padding做“视觉空格”
如果目标是元素间的间距，而不是文本内空格，优先用CSS布局属性：
- 给
<span></span>加margin-right比塞 - 用
text-indent实现首行缩进，不用 - 表格列对齐用
text-align和固定宽度，别靠空格撑开
硬编码空格容易在响应式或字体切换时错位，而CSS方案能随上下文自适应。
真正需要“多个空格”的地方其实不多，多数时候是误把样式问题当文本问题来解——先想清楚要的是“间距”还是“空格字符”，再选方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
