HTML中普通空格不显示是因为浏览器默认合并连续空白符且忽略首尾空格；可用 、white-space属性或检查iframe上下文解决。
HTML 中普通空格不显示的常见原因
HTML 默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，且首尾空格会被忽略。所以直接敲空格键，在页面上几乎看不到效果，尤其在 <div></div> 或 <p></p> 里写多个空格，最终只渲染一个。
- 这是浏览器的 HTML 解析规范行为，不是 bug
- 框架页（如
<iframe>）内部同样遵循该规则，空格问题本质相同 - 若用 JS 动态插入含空格的字符串（比如
element.innerHTML = "a b"），一样会被压缩
和其他空格实体的使用场景与限制
是最常用的非断空白符，它不会被合并、不会换行，适合需要“强制保留”的单个空格。但要注意：它属于 Unicode 字符 U+00A0，和普通空格 U+0020 语义不同，某些场景下可能影响可访问性或文本匹配逻辑。
- 多个空格需重复写：
- 不能用在属性值里直接起作用（如
title="a b"中仍显示为一个空格，除非属性本身参与渲染） -
CSS 的 white-space 属性更可控
比起堆砌 ，用 white-space 控制整块区域的空白处理更可靠，尤其适合框架页内嵌内容的统一处理。
-
white-space: pre：保留所有空白和换行，类似<pre>标签 -
white-space: pre-wrap：保留空白和换行，但允许自动换行（推荐多数场景） -
white-space: pre-line：合并连续空格，但保留换行符（折行后空格仍有效） - 注意：这些只对当前元素生效，
<iframe>内部需在其文档中设置，不能从父页 CSS 强制穿透
div.preserve-spaces {
white-space: pre-wrap;
}
框架页（iframe）内空格显示异常的排查要点
如果空格在 <iframe> 里“突然失效”，大概率不是空格本身的问题，而是上下文被重置或样式隔离了。
立即学习“前端免费学习笔记（深入）”；
- 检查 iframe 源文档是否加载成功 —— 若是
about:blank或跨域空页，内容根本没渲染 - 确认 iframe 内文档的
<body>或目标容器是否有white-space: nowrap或text-indent类样式干扰 - 避免在父页用 JS 向 iframe 的
document.body.innerHTML直接赋值含空格字符串，应确保 iframe 已就绪（监听load事件）且操作的是其内部 document - 调试时右键“查看框架源代码”，确认 HTML 源码里空格是否真的存在（而非被模板引擎/构建工具提前 trim）
更快定位。 
