标签默认不保留空格和换行，因其行内特性及white-space: normal行为；需嵌套或用white-space: pre-wrap等css控制。
<code> 标签本身不保留连续空格，也不处理换行——它只是语义上标记“这段是代码”，渲染行为完全依赖其父容器和 CSS 白空格策略。
为什么 <code> 里敲十个空格只显示一个
因为 <code> 是行内元素，默认遵循 white-space: normal，浏览器会把所有连续空白符（空格、制表符、换行）折叠成单个空格。这不是 bug，是 HTML 渲染规范的一部分。
- 直接写
<code>foo bar，中间 5 个空格会被压成 1 个 - 换行写
<code>foo\n bar，换行和缩进全丢，变成foo bar - 哪怕加了
font-family: monospace，也救不了空格折叠
正确做法：必须嵌套 <pre class="brush:php;toolbar:false;"></pre>
要让代码块里的空格、缩进、换行原样呈现，唯一标准解法是用 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 嵌套结构。
-
<pre class="brush:php;toolbar:false;"></pre>负责保留空白符（等效于white-space: pre） <code>负责语义标注，告诉浏览器“这是计算机代码”- 两者缺一不可：单用
<pre class="brush:php;toolbar:false;"></pre>缺少语义；单用<code>不保留格式 - 示例：
function hello() { console.log("world"); // 这里的两个空格缩进会被保留 }
white-space 属性的替代方案（慎用）
如果不能改 HTML 结构（比如 CMS 输出固定为 <code>），可尝试 CSS 强制控制，但要注意兼容性和副作用：
-
white-space: pre：保留所有空白，但禁止自动换行，长代码会溢出容器 -
white-space: pre-wrap：推荐首选，保留空格+允许换行，适合响应式场景 -
white-space: break-spaces：类似pre-wrap，但空格序列会占位（IE 不支持） - 别用
white-space: pre-line——它会合并空格，换行虽保留，但空格数还是不对
别踩这些坑
实际项目中常见误操作：
- 在
<code>里堆 - 用全角空格（ ）或中文标点空格：宽度不稳定，中英文混排时对不齐，且不是标准代码表示法
- 给
<code>加display: block就以为能保留缩进：不行，display 类型不改变 white-space 行为 - 忽略父级继承：如果
<code>包在<p></p>或<div> 里，而父级设置了 <code>white-space: normal，子级不会自动继承预格式化行为真正可靠的空格控制，永远始于结构选择：多行/缩进代码 → 必须
<pre class="brush:php;toolbar:false;"><code></code>；单行内联代码片段 → 接受空格折叠，或用 <code> </code> 精确控制个别间隙。</pre>
