必须用 CSS 而非 HTML 空格的场景包括：需确定性控制间距（如响应式 margin/padding）、保留空格换行（white-space: pre-wrap）、文字微调（letter-spacing）及语义化排版需求（如标点悬挂）；HTML 空格因自动合并、不可控且难维护，仅限旧邮件模板等极少数兼容场景。
用 CSS 控制空格（比如 white-space、margin、padding）比在 HTML 中硬塞 或连续空格更合理，但不是所有场景都适用——关键看语义和可维护性。
什么时候必须用 CSS 而不能靠 HTML 空格
HTML 会自动合并多个空白字符（空格、换行、制表符），所以写十个 或一堆空格，渲染效果往往和预期不一致，尤其在响应式或不同字体下。CSS 提供了确定性更强的控制方式：
-
white-space: pre-wrap可保留换行和空格，适合显示代码片段或诗歌 -
margin-left或padding-right能精准控制元素间距，且支持响应式单位（如rem、%） -
letter-spacing和word-spacing专用于文字级微调，
还有没有存在的必要
有，但仅限于极少数语义化需求：
- 中文排版中防止「标点悬挂」时，用
第 1 章），避免换行断开 - 表格中某单元格需「视觉上为空但占位」，又不想加
div或额外 class - 旧版邮件模板（内联样式受限）中，用
padding
除此之外，用 就是把样式逻辑塞进 HTML，后续改间距得翻遍 HTML 文件，非常难维护。
立即学习“前端免费学习笔记（深入）”；
white-space 常见误用与坑
这个属性看似简单，但几个值的行为差异大，容易出错：
-
white-space: nowrap会让内容强行单行，溢出也不换行——如果容器宽度不定（比如 flex 项目），可能直接撑破布局 -
white-space: pre保留所有空白，但不会自动换行，长文本会水平溢出，常被误以为「能换行」 -
white-space: break-spaces是新标准，支持空格换行，但 Safari 15.4 之前不支持，需检查兼容性
/* 推荐组合：兼顾换行、空格保留和截断 */
.text {
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
}替代空格的现代方案：Flex/Grid + 语义化结构
真正需要「空隙」的地方，优先考虑布局方案而非空格或 margin：
- 按钮组之间留空？用
gap：display: flex; gap: 0.5rem; - 卡片列表？
display: grid; grid-gap: 1rem;（或gap）更可靠 - 文字内强调间隔？用
|配合 CSS 控制宽高，比|更可控
这些方式天然支持响应式、无障碍（screen reader 不会读出无意义空格），也方便后期统一调整视觉节奏。
最易被忽略的一点：CSS 控制空格的前提是 HTML 结构干净。如果源码里已经混着几十个 和
，光加 CSS 很难理清真实意图——先清理语义，再用 CSS 精准表达，才是可持续的做法。
