HTML中空格“没生效”是因浏览器默认合并连续空格，非bug；用white-space（如pre-wrap）控制空白处理逻辑才是治本方案。
HTML里空格“没生效”，不是你写错了，而是浏览器按规范把连续空格合并成一个了——这是默认行为，不是bug。
为什么 有时也不顶用
很多人一上来就堆 ，结果发现：要么间距不对，要么换行被破坏，要么在移动端缩放后错位。根本原因是它只是“不换行空格”，不解决空白折叠问题，也不能控制换行逻辑。
-
- 它会阻止断行，可能导致长文本溢出容器，尤其在窄屏下
- 在某些邮件客户端或旧版 IE 中，
- 混用
word-spacing或letter-spacing行为异常
用 white-space 控制空格的真正场景
这才是治本方案。关键不在“加多少空格”，而在“告诉浏览器怎么对待已有空格”。
-
white-space: pre-wrap：最推荐日常使用。保留源码里的空格、制表符、换行符，同时允许自动换行（适合地址、日志、用户输入预览） -
white-space: pre-line：适合纯文本内容展示。换行符生效，但连续空格仍被合并（比如从 API 拿到的带 \n 的字符串，又不想保留多余空格） -
white-space: pre：慎用。完全保留所有空白，但禁用自动换行，容易撑破容器；也不继承父级 font-family，可能字体突变 - 别设
white-space: normal还想靠敲空格对齐——它就是专门来“吃掉”你的空格的
textarea 输入后的空格怎么保留在页面上
用户在 <textarea></textarea> 里敲了四个空格 + 两行回车，你用 JS 取 value 再塞进 div，结果全变成一个空格——这不是 JS 的锅，是 div 默认吃掉了空白。
立即学习“前端免费学习笔记（深入）”；
- 直接赋值
innerHTML会触发 HTML 解析，空格照常被合并 - 正确做法：给目标容器加
white-space: pre-wrap，然后用textContent赋值（避免 HTML 解析干扰） - 如果必须用
innerHTML（比如要渲染用户输入的简单标签），先做转义：value.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>')，再套pre-wrap - 注意：
textarea.value中的换行符是\n，不是<br>
，别误用replace(/\n/g, '<br>')
后再插进pre-wrap容器——这会造成双重换行
inline-block 元素间的空隙不是空格，但表现像空格
写了一堆 display: inline-block 的按钮或卡片，元素之间凭空多了 4px 左右间隙——这不是你代码里写了空格，是 HTML 解析时把标签之间的换行和缩进当作了文本节点。
- 这个“空隙”无法用
- 更可靠的做法：给父容器设
font-size: 0，子元素重设font-size；或用margin-left: -4px微调（注意首项不用加） - CSS Grid / Flex 布局天然规避这个问题，新项目优先考虑替换
- 如果必须用 inline-block，记得检查是否意外引入了注释、换行、不可见 Unicode 空格（如 U+200B 零宽空格）
空格问题的复杂点从来不在“怎么加”，而在于“谁在什么时候、以什么规则把它吃掉了”。盯住 white-space、textContent vs innerHTML、以及 inline-block 的渲染上下文，比堆 稳定得多。
