html中div内多个空格被合并为一个，是浏览器默认空白处理规范；推荐用white-space:pre-wrap等css属性控制空白行为，而非滥用 或标签。
直接在 <div> 里敲多个空格，浏览器只会显示一个——这是 HTML 渲染规范行为，不是 bug，也不是你代码写错了。
<h3>为什么 div 里的空格会被“吃掉”</h3>
<p>浏览器默认对所有空白字符（空格、制表符、换行）做两件事：合并连续空白为单个空格，再忽略首尾空白。哪怕你在源码里写 <code><div>hello world</div>，没用 的地方照样被压缩。
常见错误现象：
- 写
<div>a b</div>，结果 a 和 b 紧挨着，中间只有一格 - 用 JS 设置
element.textContent = 'a' + ' '.repeat(5) + 'b'，页面仍只显示一个空格（textContent不解析 HTML 实体） - 给
<div> 加了 <code>white-space: pre，但内部有 inline 元素（如<span></span>），换行和空格意外保留，破坏布局用
white-space控制整体空白行为这是最推荐的方案，语义清晰、可复用、不影响结构。关键不是“加空格”，而是“告诉浏览器别动我的空白”。
常用取值对比：
-
white-space: pre：保留所有空格和换行，但不自动折行——超宽内容会横向溢出 -
white-space: pre-wrap：保留空格和换行，且允许折行——日常首选，兼容性好（IE9+） -
white-space: pre-line：合并连续空格，只保留换行——适合段落文本，类似普通<p></p>
示例：
<div style="white-space: pre-wrap">姓名： 张三</div>
注意：
pre-wrap下依然有效，但此时它只是“一个普通空格”，不是必须项；真正起作用的是 CSS 告诉浏览器：“别合并，也别删”。用
适用于极少量、静态、语义明确的空格，比如防止“100 kg”在行尾断成两行。
容易踩的坑：
- 大量使用会让 HTML 变得臃肿难读，例如
margin-left: 40px更难维护 -
- 在 Vue/React 等框架中，若用
v-html或dangerouslySetInnerHTML插入含
其他方法的适用边界
不要为了“多几个空格”滥用这些：
-
<pre class="brush:php;toolbar:false;"></pre>标签：会强制等宽字体，且内部所有空白（包括换行）全保留——只适合代码块、ASCII 图等需要严格格式的场景 -
letter-spacing：控制字与字之间距离，会影响整个文本，不能只对某两个词加空 - 全角空格（ ）：属于 Unicode 字符，浏览器当汉字渲染，宽度稳定但语义错乱，SEO 和可访问性差
-
margin/padding：本质是布局偏移，不是文本空格；如果目标是“让两个词拉开距离”，这才是语义正确的方式
复杂点在于：你得先想清楚——这个空格是排版需求（用 CSS）、语义需求（用
pre或pre-wrap）。混用或硬编码white-space: pre-wrap来得干净可靠。 -
