浏览器默认合并空格，需用 、white-space属性或等正确方法控制； 语义为防断词，非多空格快捷键；white-space: pre-wrap最常用，兼顾保留格式与折行。
直接敲空格键永远只能得到一个空格——这是浏览器默认行为，不是你代码写错了，而是 HTML 规范如此。想控制空格数量、保留换行、对齐文字或防止断行，得用对方法，而不是堆 。
为什么 常用但容易翻车
是不换行空格（non-breaking space），语义是“这里必须有且仅有一个空格，前后词不能拆开”。它不是“多打几个空格”的快捷键。
- 适合场景：
Mr. Smith、¥ 100、表格中空<td> </td> - 不适合场景：给标题加左右间距（该用
padding）、模拟段落缩进（该用text-indent）、对齐按钮内文字（该用flex或grid） - 常见错误：
&nbps;（拼错）、 （缺分号）、复制时混入零宽空格（如），结果原样输出字符串而非空格 - 性能无影响，但堆十个
white-space 属性才是空格控制的核心开关
white-space 决定浏览器怎么解析文本里的空格、制表符和换行符。它比一堆 更干净、更可控。
-
white-space: normal：默认值，合并连续空格，丢首尾空白，允许折行 -
white-space: nowrap：合并空格，但禁止折行（整段挤在一行） -
white-space: pre：完全保留源码空格和换行，等宽字体，默认不折行 -
white-space: pre-wrap：最常用——保留空格和换行，同时允许自动折行 -
white-space: pre-line：合并连续空格，但保留换行符（适合日志、诗歌）
示例：<p style="white-space: pre-wrap">姓名: 张三</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>，四个空格会如实显示，且内容仍能响应式折行。
什么时候该用 <pre class="brush:php;toolbar:false;"></code> 标签</H3>
<p><code><pre class="brush:php;toolbar:false;"></code> 本质是 <code>white-space: pre</code> 的语义化封装，适合需要完整保留格式的纯文本场景。</p>
<ul>
<li>代码块、终端日志、ASCII 图、诗歌排版——直接套 <code><pre class="brush:php;toolbar:false;"></code> 最省事</li>
<li>别用它来“做布局”：比如为了对齐两行文字硬塞 <code><pre class="brush:php;toolbar:false;">标题 副标题</pre>，这破坏语义，后期改样式极难
<pre class="brush:php;toolbar:false;" style="font-family: -apple-system, sans-serif; white-space: pre-wrap;"></pre>
<textarea></textarea> 读取）不能直接 innerHTML = text，否则空格丢失；应设容器 white-space: pre-wrap，再用 textContent 赋值表格空单元格占位别踩坑
空 <td></td> 在 border-collapse: collapse 下可能塌陷：边框消失、高度归零、点击区域失效。
- 轻量解法：每个空单元格只塞一个
<td> </td>，足够撑开结构 - 别堆砌多个
- 整行为空？优先用
min-height控制行高，而不是每个<td> 都填 <code> - 导出 Excel 时
empty-cells: show配合边框
真正难的不是“怎么打出空格”，而是判断“这个空格到底属于内容语义、视觉排版，还是数据占位”——选错方案，后面调试半小时不如开头想清楚这一步。
