tab-size仅对white-space为pre或pre-wrap的元素生效，值只能是无单位数字或ch单位，不影响空格，IE不支持且需逐元素设置。
tab-size 属性只对 pre 和含 white-space: pre 的元素生效
直接给 <p> 或 <div> 设置 tab-size 不会起作用，浏览器会静默忽略。它只在「保留制表符原始语义」的上下文中才被解析——也就是当 white-space 为 pre、pre-wrap 或 pre-line 时（但只有 pre 和 pre-wrap 会让制表符实际渲染为缩进空格）。
常见误用场景：在 Markdown 渲染后的代码块里加 tab-size: 4，却忘了父容器是否设置了 white-space: pre；或在 Vue/React 组件中动态插入带 \t 的字符串，但外层样式没配对。
- ✅ 正确写法：
pre { white-space: pre; tab-size: 4; } - ✅ React 中可用：
<pre style={{ whiteSpace: 'pre', tabSize: 4 }}>...</pre>（注意 React 中属性名是tabSize，不是tab-size） - ❌ 错误写法：
div { tab-size: 2; }—— 没有white-space: pre，该声明无效
数值单位只能是无单位数字或 ch，不能用 px / em
tab-size 接受两种值：tab-size: 4 表示一个 \t 渲染为 4 个「当前字体下 0 字符的宽度」；tab-size: 2ch 同理，但明确以 ch 为单位。它不接受 px、em、rem 等长度单位——写了也不会报错，但会被浏览器当作无效值丢弃。
这个设计是为了让缩进宽度随字体等比变化，避免固定像素导致小字号下缩进过宽、大字号下挤成一团。
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效：
tab-size: 2、tab-size: 8、tab-size: 1.5ch - ❌ 无效：
tab-size: 24px、tab-size: 1.5em、tab-size: "4"（字符串也不行） - ⚠️ 注意：
tab-size: 0是合法值，会把所有\t压缩为零宽 —— 但多数编辑器复制出的代码含的是空格而非真实制表符，所以可能看不到效果
和编辑器缩进设置无关，也不能替代 pre 内空格处理
tab-size 只影响 HTML 中真实存在的 \t 字符的渲染宽度，它不会改变你粘贴进来的代码里已经存在的空格数，也不会让编辑器自动把空格转成制表符。很多「代码块缩进不对齐」的问题，根源其实是源文本混用了空格和 \t，而 tab-size 对空格完全无感。
例如：某行开头是 \t （1 个制表符 + 3 个空格），设 tab-size: 4 后，这一行实际缩进是 4 + 3 = 7 个空格宽；但若全用空格写成 7 个 ，结果一样——可一旦换到 tab-size: 2，前者缩进变成 2 + 3 = 5，后者仍是 7，立刻错位。
- 排查建议：用浏览器开发者工具选中
pre元素，右键「Edit as HTML」，手动查看内容里是\t还是 - 修复思路：服务端或构建时统一将源代码中的缩进标准化（如 Prettier 配
useTabs: true），或前端用 JS 替换\t为固定数量空格（但会丢失语义） - 兼容性提醒：
tab-size在 IE 完全不支持，Edge 16+、Chrome 21+、Firefox 4+ 支持；Safari 从 9.1 开始支持（iOS Safari 9.3+）
tab-size 是「逐元素生效」的，不是全局配置。如果你有多个代码块来自不同组件、不同 CSS scope，得确保每个都显式设置了该属性，或者通过足够宽泛的选择器（如 article pre）覆盖到位。否则很容易出现一部分代码缩进正常、另一部分仍按浏览器默认的 8 字符显示。 
