最常用也最容易误用的空格实体是 ，它不参与空白合并且禁止折行，适用于词间防断行或数字与单位间，但不可用于布局或缩进，语义滥用会损害可访问性与响应式表现。

直接用   就能插入一个不会被浏览器合并、也不会在行尾断开的空格；但滥用它会导致语义混乱、响应式错位，甚至影响可访问性。

为什么   是最常用也最容易误用的空格实体

浏览器默认把连续空格、制表符、换行都压成一个空格，这是规范行为，不是 bug。  是唯一被所有浏览器稳定支持的“真空格”实体，它不参与空白合并，也不允许折行——比如防止 “Mr. Smith” 被拆到两行。

• 只适用于内联文本中的微调：词间防断行、单位与数字之间（如 “100 px”）
• 写多个就得重复多次：    表示三个空格，不能简写
• 别把它当缩进或布局工具：用   实现首行缩进，换字体或屏幕变小后极易溢出
• 屏幕阅读器会把它读作 “不间断空格”，堆太多会影响语音流

  和  、  的宽度差异与兼容性陷阱

 （en 空格）约等于当前字体中字母 “n” 的宽度， （em 空格）约等于 “m” 的宽度，两者都比   宽，但支持度差得多。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

•  ：≈ 1 字符宽，IE6+ 全支持，安全首选
•  ：≈ 2 字符宽，Chrome/Firefox/Edge 支持良好，IE9+ 可用，IE8 及更早基本不渲染
•  ：≈ 4 字符宽，同样在老旧浏览器里表现不可靠，且等宽字体下可能和比例字体下差异明显
• 别混用   和全角空格（如 U+3000），后者不是 HTML 实体，复制粘贴容易带入不可见控制字符

什么时候该放弃 HTML 实体，改用 CSS 控制空白

只要空格是为排版服务的（比如对齐、缩进、段落间距），就该切到 CSS 层——HTML 实体解决的是“内容要不要断行”，而 CSS 解决的是“样式怎么呈现”。

• 想保留原文本里的多个空格 + 换行？用 white-space: pre-wrap，比一堆   清晰又可控
• 只是让两个词之间宽松点？用 letter-spacing 或 word-spacing，响应式缩放时更稳定
• 需要首行缩进？用 text-indent，而不是在段首塞 4 个  
• 想隔开两个块级元素？用 margin，不是往中间塞空格实体

在 HTML 属性值里写   会怎样

在属性中写 title="Name: John"，JavaScript 调用 getAttribute('title') 会返回解码后的字符串 "Name: John"（含普通空格），不再是  。这意味着你无法靠属性值里的   来传递“不可断行”语义。

• 属性值中写   和写普通空格，最终 DOM 中拿到的是一样的（都是 U+0020）
• 如果真需要在 data-* 属性里存“防断行空格”，得用其他编码方式，比如 base64 或自定义分隔符
• 别在 class 或 id 里用  ，HTML 解析器会把它转为空格，导致 class 名非法

真正难的不是怎么打出空格，而是判断这个空格到底是内容的一部分，还是样式需求——前者才轮到   出场，后者一概交给 CSS。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！