浏览器默认将连续空格压缩为一个，是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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>等价于<p>text</p>
用 插入不可折行空格
是最常用、兼容性最好的实体空格，它不会被合并，也不会在行尾断开。
- 要显示3个空格，就得写3个
Hello world - 适合防断行场景，比如
Mr. Smith、货币金额$ 1,234.56 - 别用它做段落缩进或对齐——语义错误，响应式下容易溢出容器
- 屏幕阅读器会读作“不间断空格”，大量使用影响可访问性
用 white-space CSS 属性保留原始空白
比起堆 ，white-space 是更现代、更可控的解法，尤其适合动态内容。
-
white-space: pre：像<pre class="brush:php;toolbar:false;"></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 才是语义正确、响应安全的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
