HTML里加空格为什么经常“不生效”
因为浏览器默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，甚至直接忽略首尾空格。这不是bug，是HTML规范行为——它只关心内容结构，不负责排版细节。
常见错误现象： 用多了页面错位、 （普通空格）在代码里写了七八个，渲染出来还是一个；用 pre 标签又导致文字不能换行或样式失控。
- 纯文本场景（如按钮文字、标题中微调间距）：优先用
- 需要保留多空格+换行的代码/日志展示：用
<pre><code>组合 - 想控制某几个词之间的间距：改用 CSS 的
letter-spacing或margin更可靠
和 有什么区别
是不换行空格（non-breaking space），浏览器不会在这里折行，适合防止“单价 100 元”被拆成两行； 就是普通空格的十进制实体，行为和键盘敲的空格完全一样，照样会被合并。
性能/兼容性影响：两者都无性能问题，但 在老版本 IE 或某些邮件客户端里更稳定； 几乎没人用，既没优势还容易写错（比如写成 却忘了加 x）。
立即学习“前端免费学习笔记（深入）”；
- 要“锁住”两个词不让断行：用
- 只是想表达“这里有个空格”，且允许断行：直接打空格就行，不用实体
- 别混用
用 CSS 处理空格比用 HTML 实体更可控
HTML 实体本质是内容层干预，而空格问题多数时候其实是样式需求。比如“姓名：张三”中间想空两格，用 看似快，但换字体或缩放后可能不协调；用 CSS 则能响应式调整。
使用场景：表单标签对齐、导航菜单字间距、强调文本间隙等。
- 单词间固定宽度：用
word-spacing（注意它会影响所有单词间隔） - 单个元素内统一加空：用
padding-left或margin-left - 防止空格被压缩：给容器加
white-space: pre-wrap，比堆
textarea 和 contenteditable 里的空格怎么保留
用户输入的空格在 textarea 里天然保留，但一旦用 JS 读取再塞进 div 或 span，就又会被合并。常见错误是直接赋值 innerHTML，结果用户敲的四个空格变成一个。
解决关键点：不是“怎么加空格”，而是“怎么让空格不被渲染引擎吃掉”。
- 从
textarea.value取值后，替换为.replace(/\s/g, ' ')（慎用，会把换行也转掉） - 更稳妥：插入时用
textContent+ CSS 控制white-space - 如果必须用
innerHTML且保留格式，先用innerText转义再处理，避免 XSS 风险
复杂点在于：空格在 HTML 中既是内容又是表现，你得先想清楚——这个空格是“用户数据的一部分”，还是“为了好看加的装饰”？前者该存原样、渲染时用 CSS 保真；后者直接用样式控制，别污染 HTML 结构。
