CSS tab-size 制表符宽度
tab-size属性：自定义tab字符显示宽度(tab-size:4/tab-size:8)、在<pre><code>代码块中控制缩进显示、与white-space:pre配合、display:tab-size可设为长度值或数值 · 难度：入门 · +10XP
CSS tab-size —— 控制代码缩进的显示宽度
在网页上展示代码时，tab字符默认显示为8个空格的宽度。这意味着用tab缩进的代码会显得又长又宽，在手机等小屏幕设备上阅读体验很差。tab-size属性让你自定义tab字符的显示宽度。
基本用法
pre code {
tab-size: 2; /* tab显示为2个空格宽，代码紧凑 */
/* 或 */
tab-size: 4; /* tab显示为4个空格宽，和VS Code默认一致 */
}大多数现代代码编辑器（如VS Code、Sublime Text）的默认tab宽度是4个空格。为了让网页上的代码显示和开发者在编辑器中看到的一模一样，建议设置一致的tab-size。
常见值对比
| tab-size值 | 效果 | 适用场景 |
|---|---|---|
| 2 | 紧凑缩进 | 窄屏、移动端代码展示 |
| 4 | 标准缩进 | 大多数项目的默认值 |
| 8 | 宽缩进（浏览器默认） | 不推荐，太宽 |
动手练习
- 基础练习：找一个用tab缩进的代码片段，在同一个页面上分别设置tab-size为2、4、8，对比三种设置的阅读体验差异。
- 进阶应用：在技术博客的所有代码高亮区域（pre code）统一设置tab-size为4，确保代码风格与开发环境一致。
- 项目实战：检查你网站中所有展示代码的区域，确保设置了合理的tab-size。在移动端测试时确认代码不会因为缩进过宽而导致大量横向滚动。
接下来学什么？
下一课学习letter-spacing等文字排版属性，进一步优化网站的阅读体验。