HTML中普通空格不显示是浏览器默认行为,解析器会压缩连续空白并忽略首尾空格;需用 、或white-space CSS等语义化方式保留格式。

HTML 里普通空格不显示?这是浏览器默认行为
HTML 解析器会把连续的空白字符(空格、制表符、换行)压缩成一个空格,且首尾空格会被忽略。所以直接敲空格键,在页面上大概率看不到效果——不是你输错了,是 HTML 标准就这么设计的。
- 在
中,无论写 1 个还是 10 个空格,最终只显示 1 个hello world
- 开头或结尾的空格(如
)会被自动裁掉hello
- 想保留格式,得用语义化方式,而不是靠“多敲几次空格”
是最常用但容易误用的空格符号
(non-breaking space)能强制显示一个不可折行的空格,但它不是万能的,用多了反而影响可访问性和维护性。
立即学习“前端免费学习笔记(深入)”;
- 适合场景:中文标点前强制留空(如「第 1 章」)、单位与数字之间(如「100 px」)、防止换行断开(如「Mr. Smith」)
- 不适合场景:段落内对齐、模拟缩进、排版布局——这些该用 CSS 的
margin、padding或text-indent - 过度使用
会导致屏幕阅读器朗读为“空格”,干扰语义;也增加 HTML 体积,不利于 SEO
需要真实空白字符?用 或 white-space CSS
如果真要保留原始空格、缩进和换行(比如展示代码片段、诗歌、ASCII 图),就得脱离默认渲染流。
标签天然保留所有空白,但语义是“预格式化文本”,别滥用在普通段落里- 更灵活的方式是用 CSS:
white-space: pre;、white-space: pre-wrap;或white-space: pre-line; - 例如:
会显示全部空格,同时允许自动换行hello world
- 注意:
white-space: pre;不换行,内容超宽会撑破容器;pre-wrap更贴近日常需求 -
(en 空格,约 0.5em)和(em 空格,约 1em):主要用于排版精细控制,比如表格对齐、公式空隙,普通网页极少需要 -
(窄空格,约 1/6em):数学或专业排版场景,如「123 456」千位分隔,但现代更推荐用Intl.NumberFormat自动处理 - 别手写
或—— 和等价,可读性差,易出错
其他空格实体及其适用边界
除了 ,HTML 还定义了多个空格相关实体,但绝大多数情况没必要手动输入。
只在真正需要“防断行 + 显式空格”的地方出现一次就够了。










