浏览器默认将连续空格压缩为一个，是HTML规范定义的空白折叠行为；可用实体或white-space:pre-wrap等CSS属性保留多个空格。
直接敲空格键永远只能显示一个空格——这是HTML规范行为，不是你代码写错了。
为什么连续空格在浏览器里只显示一个
HTML解析器会在词法分析阶段把所有空白字符（空格、制表符、换行）统一转成U+0020，并把连续多个压缩为单个。哪怕你在源码里写10个空格+3个tab+2个换行，最终渲染出来还是一个空格。
- 这不是bug，是HTML标准定义的行为
-
<p>Hello world</p>和<p>Hello world</p>渲染效果完全一样 - 首尾空格会被直接忽略，
<p> text </p>等价于<p>text</p>
用 插入不可折行空格
是最常用、兼容性最好的实体空格，它不会被合并，也不会在行尾断开。
- 要显示3个空格，就得写3个
Hello world - 适合防断行场景，比如
Mr. Smith、货币金额$ 1,234.56 - 别用它做段落缩进或对齐——语义错误，响应式下容易溢出容器
- 屏幕阅读器会读作“不间断空格”，大量使用影响可访问性
用 white-space CSS 属性保留原始空白
比起堆 ，white-space 是更现代、更可控的解法，尤其适合动态内容。
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre：像<pre>一样保留所有空格和换行，但不强制等宽字体 -
white-space: pre-wrap：最推荐，保留空格和换行，同时允许自动换行（适合地址、日志等） -
white-space: break-spaces：新标准，空格也能换行（Chrome 83+ / Firefox 73+），但IE完全不支持 - 慎用
white-space: nowrap——整块内容不换行，容易撑破容器
表格空单元格必须用 吗
是的，<td></td> 在大多数浏览器里会塌陷（无高度、无边框、无背景）， 是最直接有效的占位手段。
- 仅用于视觉占位场景，比如后台报表中“暂无数据”的格子
- 语义化要求高的表格（如无障碍需求），应配合
aria-label="空"或隐藏文本 - 避免写
padding-left或text-indent的事 - 动态生成时，JS 层判断更可靠：
cellContent || ' '，而不是模板里硬塞
真正难的不是选哪个方案，而是判断该不该用空格——多数时候，用 margin、padding 或 text-align 才是语义正确、响应安全的做法。
