tab-size在pre标签中有效，但仅当内容含制表符\t且配合white-space:pre-wrap等属性时才起作用；纯空格缩进下该属性无效。
pre 标签里 tab-size 属性到底管不管用
tab-size 是 CSS 属性，不是 HTML 属性，不能写在 <pre class="brush:php;toolbar:false;" tab-size="4"></pre> 这种地方。它只对 <pre class="brush:php;toolbar:false;"></pre> 和 <code> 元素生效，且必须通过 CSS 设置，比如 pre { tab-size: 4; }。浏览器渲染时，它控制的是制表符（\t）显示为几个空格宽——仅影响视觉宽度，不改变实际字符内容。
为什么设置了 tab-size 还是看不到缩进
常见错误是把缩进逻辑搞混了：
- 你往
<pre class="brush:php;toolbar:false;"></pre>里塞的是空格，不是\t，那tab-size完全不触发 -
<pre class="brush:php;toolbar:false;"></pre>默认只保留原始空白，但若父容器设了white-space: normal，就会覆盖掉它的行为 - 没加
white-space: pre或pre-wrap，导致换行和空格被浏览器忽略
正确做法：确保 <pre class="brush:php;toolbar:false;"></pre> 元素本身有 white-space: pre-wrap（推荐），再配 tab-size: 4；如果内容里真有 \t 字符，它才会按设定宽度显示。
VSCode 编辑器里怎么让 pre 里的代码缩进“看起来”一致
编辑器里的缩进设置和浏览器渲染是两套系统，别指望 VSCode 的 editor.tabSize 直接影响 <pre class="brush:php;toolbar:false;"></pre> 渲染效果。要让预格式化代码在编辑器和浏览器中观感统一，得配合做三件事：
- 在 VSCode 中统一用空格缩进（
"editor.insertSpaces": true），避免混入\t - HTML 源码里写
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，样式优先作用于<code>而非外层<pre class="brush:php;toolbar:false;"></pre> - CSS 中写
code { tab-size: 2; white-space: pre; }，并给外层<pre class="brush:php;toolbar:false;"></pre>加overflow-x: auto防溢出
pre 里想用空格缩进而不是 tab，tab-size 还有必要设吗
没必要。如果你的内容全是空格（比如从 JS 生成的字符串、或手动敲的两个空格缩进），tab-size 就是摆设。这时候真正起作用的是：
- CSS 的
font-family（等宽字体如monospace才能对齐） -
white-space: pre-wrap（保留空格 + 自动换行） - 外层容器的
overflow-x: auto（防止长行撑破布局）
容易被忽略的一点：<pre class="brush:php;toolbar:false;"></pre> 内部的空格缩进，如果源自 HTML 源码里的换行和缩进，会被当作文本的一部分保留——但一旦后端吐出的字符串没带这些空格，前端光靠 CSS 是补不回来的。缩进必须由内容本身携带，CSS 只负责“怎么展示”，不负责“怎么生成”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
