html中普通空格不显示是因为浏览器默认合并连续空白字符并忽略首尾空白，这是规范行为；需用 保留空格，或用white-space属性控制整体空白处理方式。
HTML 里普通空格不显示，为什么？
浏览器默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，再把首尾空白直接忽略。所以你在 HTML 源码里敲 10 个空格，页面上只看到 1 个；回车换行也一样，全被“吃掉”了。
这不是 bug，是 HTML 的规范行为，目的是让写在代码里的缩进和换行不影响渲染效果。
- 只有
-
- 别用多个
什么时候该用 ，什么时候不该用？
只适合解决“必须保留这个空格”的语义或排版问题，比如单位紧挨数字（100 px）、人名中间（Jean Luc）、防止折行（Fig. 5）。
它不是排版工具，不能替代 CSS。
立即学习“前端免费学习笔记（深入）”；
启科网络PHP商城系统
下载
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
- 想控制文字间距？用
letter-spacing - 想控制词间距离？用
word-spacing - 想对齐或留白？用
padding/margin/text-indent - 想实现缩进段落？用
text-indent，别在开头塞 4 个
用 white-space 控制整块区域的空格行为
如果一段文本里有大量空格、缩进或换行需要原样显示（比如代码片段、诗歌、日志输出）， 就不现实了。这时候应该用 CSS 的 white-space 属性。
-
white-space: pre：保留空格和换行，但不自动换行（内容超宽会溢出） -
white-space: pre-wrap：保留空格和换行，且允许自动换行（最常用） -
white-space: pre-line：合并空格，但保留换行（类似普通文本，只是换行生效） - 别在全局
body上设pre-wrap——所有按钮、链接、导航都会受影响
示例：
<p style="white-space: pre-wrap"> 第一行（前面有两个空格）\n 第二行（也有缩进）</p>
容易被忽略的细节：空格的宽度其实不固定
的宽度取决于当前字体和字号，不是绝对像素值。同一段文字，在不同字体（如 system-ui vs monospace）下， 看起来可能差挺多。
- 等宽字体里
a宽度一致；比例字体里它通常比a略窄 - 移动端小字号下，多个
- 屏幕阅读器会把
真要像素级控制，还是得靠 inline-block + width 或伪元素 ::before 配合 content。
