tab-size 属性仅对含真实制表符（\t）且启用 white-space: pre 等保留空白的元素生效；它不处理空格缩进，非 css 属性不可写在 html 中，且数值应为无单位整数，后端若未输出 \t 则前端无法补救。
tab-size 属性只对含真实制表符（\t）且启用空白保留的元素生效，不是“缩进调节器”，也不能把空格变 tab 或反过来。
为什么设置了 tab-size 却没变化？
这是最常卡住的地方，核心原因就三点：
-
tab-size不作用于纯空格缩进——你写的是四个空格，它完全无视 - 目标元素没配
white-space: pre、pre-wrap或pre-line，浏览器直接把\t当普通空白折叠了 - 误写成 HTML 属性，比如
<pre class="brush:php;toolbar:false;" tab-size="4"></pre>—— 它是 CSS 属性，只能走样式规则
pre 和 code 元素上怎么写才有效？
推荐组合写法，兼顾兼容性和语义：
pre,
code {
white-space: pre-wrap;
tab-size: 4;
}
/* Firefox 旧版必须加前缀 */
pre,
code {
-moz-tab-size: 4;
}
注意：code 元素默认是 inline，若内容跨行或含 \t，务必确保它被包裹在 pre 内，或自己设 display: block；否则 white-space 可能不生效。
数值选 2、4 还是 8？有什么影响？
选哪个取决于你内容里实际用的制表符宽度，不是“风格偏好”：
-
tab-size: 2：适合极简嵌套，但容易让深层缩进挤在一起，可读性下降 -
tab-size: 4：主流编辑器默认值，视觉平衡，兼容性好 -
tab-size: 8：浏览器默认，但现代代码普遍嫌太宽，易撑破容器 - 别用长度单位（如
tab-size: 1em）——所有主流浏览器都不支持
后端吐出的字符串没 \t，前端还能补救吗？
不能。CSS 不生成内容，只渲染已有内容：
- 如果后端返回的是带空格缩进的字符串（比如 JSON.stringify(obj, null, 2)），
tab-size完全无效 - 如果后端返回的是含
\t的原始源码（如从 Git 读取 .js 文件），那tab-size才起作用 - 想统一观感，得前后端约定缩进方式：要么全用空格 + 配等宽字体 +
white-space: pre-wrap，要么全用\t+tab-size
最容易被忽略的一点：缩进是内容的一部分，不是样式能“修出来”的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
