tab-size仅对white-space为pre/pre-wrap/pre-line的元素生效，主要作用于<pre>和<textarea>；需配合前缀兼容Firefox，值仅支持非负整数，不支持长度单位。
tab-size 属性只对 white-space: pre 类元素生效
直接给 <div> 或普通段落加 tab-size 没效果，它只作用于保留空白符的上下文。常见误用是套在 Markdown 渲染后的 <p> 里——那些制表符早被浏览器折叠成空格了。
必须确保父容器或自身设置了 white-space: pre、pre-wrap 或 pre-line。最稳妥的是用 <pre><code> 结构，再配合 tab-size：
pre code {
white-space: pre;
tab-size: 4;
}
-
tab-size的值可以是数字（表示空格数）或长度单位（如2em、16px），但注意：Firefox 不支持带单位的值，只认整数 - 若用
pre-wrap，换行行为会变化，但tab-size仍有效；pre-line会合并空白符，制表符可能被忽略 - 不要依赖继承：
<pre>上设tab-size，<code>内部仍需显式声明或继承确认
不同浏览器对 tab-size 的兼容性差异明显
Chrome 和 Safari 支持完整，包括单位值；Firefox 自 v55 起支持，但仅接受无单位整数（tab-size: 4 ✅，tab-size: 2em ❌）；Edge 已随 Chromium 统一，表现同 Chrome。
如果你的代码块要兼容旧版 Firefox，就得绕开单位写法：
立即学习“前端免费学习笔记（深入）”；
- 统一用整数：
tab-size: 2或tab-size: 8 - 避免
tab-size: 1ch这类依赖字体度量的写法——各浏览器解析不一致 - 可通过
@supports (tab-size: 4)做特性检测，但别用它做降级兜底，因为不支持时该属性直接被忽略，不会触发 fallback
tab-size 对缩进语义没影响，只是视觉渲染
tab-size 不改变 HTML 中制表符的实际字符宽度或 DOM 结构，它只控制渲染时占几个空格位置。这意味着：
- 复制粘贴代码时，制表符还是那个
\t字符，不会变成空格；粘贴到 IDE 中是否对齐，取决于目标编辑器的tab-size设置 - 用 JavaScript 读取
textContent，拿到的仍是原始\t，不是空格字符串 - 屏幕阅读器不会因
tab-size改变播报方式——它跟可访问性无关 - 如果代码块用了语法高亮库（如 Prism.js），确保高亮后
<span>没破坏white-space继承链，否则tab-size失效
和 CSS-in-JS 或构建工具一起用时容易漏掉重置
用 Tailwind、Emotion 或 Vite 的 CSS scope 时，tab-size 容易被覆盖或未正确应用。常见问题：
- Tailwind 默认不包含
tab-size工具类，需手动在theme.extend里加，或写class="[tab-size:4]"（需启用content扫描） - 使用 CSS Modules 时，
:global(pre)必须显式写出，否则局部作用域会阻止样式透出到<pre>元素 - Vite + Less/Sass 中，若用
@import引入重置样式，检查是否在pre规则前被其他white-space声明覆盖
真正麻烦的不是怎么写，而是你改了 tab-size 却发现没生效——八成是 white-space 没配对，或者被更高优先级的样式干掉了。先查 computed style 里的 white-space 值，再看 tab-size 是否被划掉。
