HTML中连续空格被合并为一个空格是规范行为，非bug； 是不可折行空格，影响可访问性且可能被CMS过滤；更可靠的是用white-space CSS属性控制空白处理方式。
为什么直接敲空格没用
HTML规范要求浏览器把连续的空白字符（空格、制表符、换行）合并成一个空格，这不是bug，是标准行为。你在代码里写姓名： 张三，渲染出来还是一个空隙；写十个普通空格，也只显示一个。
用 要注意什么
每个 代表一个不可折行空格，可以单个或叠加使用，不需要成对出现。
- 适合微调对齐，比如表格列头文字右对齐后加两个
- 但它本质是字符，会被屏幕阅读器跳过或读作“空格”，影响可访问性
- 某些CMS（如CKEditor）会自动过滤掉
- 一整行全是文字+大量
更可靠的是 white-space CSS 属性
这是日常开发中最可控的方案，直接告诉浏览器怎么处理空白：
-
white-space: pre-wrap：保留所有空格和换行，同时允许自动换行（推荐用于地址、简介等自由文本） -
white-space: pre-line：保留换行符，但合并连续空格（适合从API读取带\n的纯文本） -
white-space: pre：完全保留源码格式，但会禁用自动换行，且字体变成等宽（仅限代码、日志） - 别用
white-space: nowrap来“防合并”——它只是禁止换行，空格照样被合并
什么时候该放弃空格思路
真正难的是既要视觉对齐、又要语义清晰、还要适配高缩放比和窄屏。比如商品列表中“名称”“价格”“库存”三列靠空格硬对齐，缩放后立刻错乱，视障用户也感知不到结构。
立即学习“前端免费学习笔记（深入）”；
- 这种场景下，
white-space都是临时补丁 - 应该改用
display: table-cell或CSS Grid做真实列布局 - 按钮内文字微调间距？优先用
letter-spacing或padding-left，而不是塞一堆
