HTML中直接敲空格失效是因浏览器执行空白折叠；应优先用CSS（如margin、gap）控制间距，仅在无CSS环境才选用语义匹配的空格实体（如 、 ）。
HTML里打空格为什么经常失效
直接敲空格键在HTML中通常不生效，因为浏览器会把连续的空白字符（空格、换行、制表符）合并成一个空格，甚至在某些上下文里完全忽略。这不是bug，是HTML规范定义的“空白折叠”行为。
- 普通文本中连敲5个空格，页面只显示1个
-
<span>图标</span> <span>文字</span>中的空格可能被压缩或受CSS影响消失 - 用
真正可控的空格符号： 、 、 、
不同场景需要不同宽度和行为的空格。别只认 ，它太“硬”了——不会换行、宽度固定、语义是“防止断词”，不是“留白”。
-
-
100 kg→ 改用100 kg -
-
（Zero Width Space）：零宽空格，不影响显示，但允许浏览器在此处换行，适合长英文单词内部分隔
CSS替代方案更灵活：margin / padding / letter-spacing
如果目标是“图标旁文字保持一定距离”，用HTML实体不如用CSS控制，尤其涉及响应式或主题切换时。
- 给图标元素加
margin-right: 4px，比写 - 用
display: inline-flex+gap可统一控制图标与文字间距，且自动适配换行 -
letter-spacing对单个文字间隙有效，但不适用于图标+文字这种块级组合
<span class="icon">?</span>
<span class="label">文档列表</span>
<style>
.icon { margin-right: 0.5em; }
.label { vertical-align: middle; }
</style>
实际项目中怎么选：看语义还是看效果
多数情况下，“图标旁加空格”本质是UI间距问题，不是文本排版问题。优先走CSS路线；只有在纯文本环境（如title属性、alt文本、服务端模板直出无CSS）才考虑HTML空格实体。
立即学习“前端免费学习笔记（深入）”；
- 邮件模板、RSS摘要、静态HTML片段 → 用
- 现代前端框架（React/Vue）组件 → 直接写
<Icon /><span style={{ marginLeft: '4px' }}>文字</span> - 可访问性要求高时，避免用多个
最常被忽略的一点：字体本身会影响空格渲染。比如等宽字体下 看起来比在系统默认字体下更窄，测试时务必在目标字体下验证。
