tab-size 不作用于 元素本身，也不自动穿透到 或 中的文本内容；它仅对含真实 \t 字符且 white-space 为 pre 或 pre-wrap 的块级容器（如 或 ）生效，需配合等宽字体和显式设置才有效。
tab-size 对 <table> 内的代码片段根本不起作用
<p>直接说结论：<code>tab-size 不作用于 <table> 元素本身，也不自动穿透到单元格（<code><td> 或 <code><th>）里的文本内容。它只对含真实 <code>\t 字符的块级容器生效，且前提是该容器能“渲染”制表符——而普通 <td> 默认是 <code>white-space: normal，会把 \t 当空格甚至忽略掉。
想让 <td> 里显示带缩进的代码，必须用 <code><pre class="brush:php;toolbar:false;"><code></code> 包裹
<p>浏览器只在 <code><pre class="brush:php;toolbar:false;"></pre>（或 white-space: pre / pre-wrap）上下文中保留制表符语义。所以正确结构是：
<td>
<pre class="brush:php;toolbar:false;"><code class="html"><div>
\t<p>hello</p>
</div></code>
<td> 里显示带缩进的代码，必须用 <code><pre class="brush:php;toolbar:false;"><code></code> 包裹
<p>浏览器只在 <code><pre class="brush:php;toolbar:false;"></pre>（或 white-space: pre / pre-wrap）上下文中保留制表符语义。所以正确结构是：
<td> <pre class="brush:php;toolbar:false;"><code class="html"><div> \t<p>hello</p> </div></code>
然后给 <code> 设置：
-
tab-size: 4（现代浏览器支持） -
font-family: 'SFMono-Regular', Consolas, monospace（等宽字体是前提） -
white-space: pre或pre-wrap（确保\t不被折叠）
常见错误：给 <td> 直接设 <code>tab-size 却没效果
这种写法无效：
<td style="tab-size: 2">\t<span>text</span> </td>
原因有三：
<td> 默认 <code>white-space: normal，\t被转成单个空格，tab-size失去作用对象-
tab-size不继承，必须显式加在能渲染\t的元素上（如<pre class="brush:php;toolbar:false;"></pre>或<code>） - 即使你手动插入四个空格代替
\t，tab-size也完全不生效——它只管制表符，不管空格 - 若用
\t：确保后端/模板生成的是真实制表符（不是 4 个空格），再配tab-size+<pre class="brush:php;toolbar:false;"><code></code> + 等宽字体</pre> - 若用空格：直接放弃
tab-size，改用padding-left或text-indent控制视觉缩进，但注意这不改变代码结构，仅影响显示 - 混合使用（比如 Prettier 输出）极易导致对齐漂移——
tab-size: 2下一个\t看起来像两个空格，但粘贴到 VS Code（tab-size: 4）里就变宽了
真正要控制缩进宽度，得先决定用制表符还是空格
这是最常被跳过的决策点：
真实项目里，tab-size 的值本身不难设，难的是保证整个链条：源码含 \t → 容器启用 pre 模式 → 字体等宽 → CSS 无优先级冲突 → 复制目标环境兼容。漏掉任一环，缩进就“看起来不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
