HTML中插入真正空格应优先用CSS的white-space属性而非多个 ：标题用nowrap，描述用pre-wrap，代码用pre；避免用letter-spacing模拟对齐，须明确内容结构与样式职责分离。
HTML 里怎么插入真正的空格（不是被浏览器合并的）
浏览器默认会把连续多个 、普通空格、制表符、换行都压缩成一个空格。想让文字之间保留多个空格，必须用 HTML 实体或 CSS 控制。
-
- 连续写多个
- 更合理的方式是用
white-spaceCSS 属性控制容器，比如white-space: pre;或pre-wrap，让内部文本按源码空格/换行原样渲染
卡片式布局中文字空格错乱的常见原因
卡片常通过 flex 或 grid 布局，内部文字若含多余空格，容易因父容器 justify-content、align-items 或字体度量差异导致视觉偏移。
- 原始 HTML 换行和缩进会被解析为空格，例如：
——标题
描述文字
前的换行+缩进可能在某些字体下生成微小空白 - 中文与英文混排时，中文字体通常无半角空格宽度，而英文单词间空格会被压缩，造成对齐不均
- 使用
text-align: center的卡片标题，若标题内有
white-space 在卡片文字中的实际取值选择
针对卡片内不同文字区域，应按需选值，不能一概设为 pre：
立即学习“前端免费学习笔记（深入）”；
- 卡片标题（短文本、需严格对齐）：用
white-space: nowrap;防止折行，配合overflow: hidden; text-overflow: ellipsis; - 卡片描述（允许折行、需保留段落空格）：用
white-space: pre-wrap;，既保留源码空格/换行，又支持自动折行 - 代码片段或数据字段（如版本号
v1.2.0 alpha）：用white-space: pre;，禁止折行且完全保留空格 - 避免用
white-space: pre-line;处理用户输入内容——它会把连续空格合并，只保留换行，易丢失格式意图
用 font-family 和 letter-spacing 替代空格对齐的陷阱
有人试图用等宽字体 + letter-spacing 模拟空格对齐，这在卡片布局中极易失效：
-
letter-spacing作用于所有字符间隙，包括中文字符之间，会导致中文字间距异常拉大 - 不同字体的字宽不一致（如
ConsolasvsYaHei），卡片响应式缩放时对齐会漂移 - 屏幕缩放或系统字体替换后，
letter-spacing: 0.5em可能变成 6px 或 8px，破坏设计预期 - 真正需要对齐的场景（如价格栏右对齐、状态标签左对齐），应该用
text-align+ 容器宽度控制，而不是靠空格“凑”
更稳定；而用户生成的内容，必须用 pre-wrap + 后端清洗，不能依赖前端硬编码空格。 
