html中普通空格不显示是因为解析器按规范将连续空白字符压缩为单个空格并忽略首尾空白；可用实体或white-space: pre-wrap等css属性保留多个空格。
为什么普通空格在HTML里不显示
HTML解析器默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，再忽略首尾空白——这是规范行为，不是bug。所以写<p>hello<span> </span>world</p>，视觉上仍是“hello world”中间一个空格。
用 实现可控的多个空格
是不间断空格字符实体，浏览器不会合并它，也不会在换行时断开。需要几个空格就放几个 ：
<p>姓名：<span>张</span> <span>三</span></p>
注意： 是HTML实体，不是Unicode字符，不能直接复制粘贴空格进去；也不建议堆叠几十个 来对齐，语义不清且难以维护。
CSS的white-space属性更灵活
当需要保留整段文本中的空格和换行（比如代码块、诗歌排版），用white-space更合适：
-
white-space: pre—— 完全保留空格与换行，但不自动换行 -
white-space: pre-wrap—— 保留空格与换行，且内容超宽时自动折行（最常用） -
white-space: pre-line—— 合并连续空格，但保留换行符
示例：
<div style="white-space: pre-wrap"> 一行开头两个空格 下一行也有缩进</div>
用CSS letter-spacing或padding做对齐更可靠
如果目标是视觉对齐（如表单标签右对齐、字段间固定间距），别依赖空格数量：
- 用
padding-right控制标签后留白 - 用
letter-spacing微调字距（慎用，影响可读性） - 表格布局或Flex/Grid更稳定，空格只是临时补丁
真正难的是区分“需要语义化保留的空白”和“纯样式需求”——前者用 或white-space，后者应该交给CSS布局解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
