浏览器合并空白符是HTML规范行为，需用 、white-space CSS属性或<pre>标签（配合重置样式）实现空格显形，而非滥用空格键；布局间距应优先使用margin/padding等CSS方案。
浏览器默认会把连续空格、制表符、换行全合并成一个空格，这不是 bug，是 HTML 规范行为；想让空格“显形”，得用对方法，而不是狂敲空格键。
用 插入不可折行空格
这是最常用也最容易误用的方式。 是 non-breaking space，每个都渲染为一个固定宽度、不被合并、也不在行尾断开的空格。
- 要 3 个空格，就得写
- 适合防断行场景：比如
Mr. Smith、金额后加单位¥ 199 - 不适合整段缩进或对齐——语义错误，响应式下易溢出，屏幕阅读器会逐个读出“不间断空格”
- 它和普通空格宽度一致，如需更宽，可用
用 white-space CSS 属性控制空白行为
比起硬塞 ，用 CSS 控制更干净、可维护性高，且能批量生效。
-
white-space: pre-wrap：保留所有空格与换行，但允许自动换行 —— 最常用，适合地址、日志、带缩进的说明文本 -
white-space: pre：完全保留空格+换行，不换行 —— 适合代码块，但内容超宽会触发水平滚动条 -
white-space: pre-line：合并空格，但保留换行符 —— 适合从富文本编辑器粘贴过来的带换行内容 - 别在
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8714" title="HTML汇报生成器"><img src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8714" title="HTML汇报生成器">HTML汇报生成器</a> <p>🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p> </div> <a href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>或<span></span>上滥用pre，它会让字体变成等宽，破坏排版一致性
用 <pre> 标签但必须重置样式
<pre> 确实原样保留空格，但它自带副作用：等宽字体、上下 margin、内容超宽时出现滚动条。
立即学习“前端免费学习笔记（深入）”；
- 必须配合 CSS 重置才可控，例如：
pre { font-family: inherit; white-space: pre-wrap; margin: 0; } - 只用于真正需要“源码级格式保留”的场景：CLI 日志、ASCII 图、缩进敏感的配置示例
- 别用它给按钮文字加空格，或给标题首行缩进——语义错乱，SEO 和无障碍都会受损
- 如果只是想让一段文字里的多个空格显示出来，
white-space: pre-wrap+ 普通<div>就够了
别用空格替代布局间距
想让两段文字隔开一点？或者让图标和文字之间留空？这不是空格该干的事。
- 段落间空隙：用
margin-bottom或padding，不是堆 - 文字内微调间距：优先考虑
letter-spacing（字符级）或word-spacing（英文单词间），中文慎用负值 - 全角空格（ ）虽能绕过合并，但它是 Unicode 字符，语义上等于一个汉字，用多了影响可访问性和搜索索引
- 动态生成内容时，JavaScript 中插入空格建议用
'\u00a0'（即
真正难的不是“怎么让空格显示”，而是判断“该不该用空格来实现”。多数时候，你想要的其实是 margin、padding、text-indent 或 white-space 的组合效果，而不是一堆看不见的 。
