css的tab-size属性用于指定元素内制表符（Tab键产生的字符）的显示宽度，默认情况下不同浏览器对制表符的宽度渲染可能存在差异，使用该属性可以统一控制制表符的显示效果，在代码展示、文本排版等场景中非常实用。
tab-size属性基本语法
tab-size属性的语法格式如下：
/* 使用整数表示制表符的宽度，单位为字符 */ tab-size: 4; /* 使用长度值表示制表符的宽度 */ tab-size: 2em; /* 继承父元素的tab-size值 */ tab-size: inherit;
该属性的取值分为两类，一类是<integer>整数类型，表示制表符占据的字符数量，默认值为8；另一类是<length>长度类型，支持px、em等常见长度单位，不过目前长度类型的兼容性不如整数类型广泛。
tab-size属性适用元素
tab-size属性适用于所有显示文本的块级元素和内联块元素，最常见的使用场景是<pre>标签包裹的代码块，因为<pre>标签会保留文本中的制表符和换行符，默认制表符宽度可能不符合代码展示的需求。
实际使用示例
示例1：调整代码块的制表符宽度
在展示代码时，我们通常希望制表符宽度为4个字符，避免代码缩进过宽，可以通过以下样式实现：
/* 为所有pre标签设置制表符宽度为4个字符 */
pre {
tab-size: 4;
/* 可选：设置等宽字体让代码显示更整齐 */
font-family: 'Courier New', monospace;
}
对应的HTML结构如下：
<pre>
function test() {
// 这里使用Tab键缩进，宽度为4个字符
if (true) {
console.log('tab-size示例');
}
}
</pre>
示例2：普通文本中的制表符宽度设置
如果普通文本中需要保留制表符并控制其宽度，也可以直接为对应元素设置tab-size属性：
.text-with-tab {
tab-size: 2;
white-space: pre-wrap; /* 保留制表符同时允许换行 */
}
<div class="text-with-tab"> 姓名： 张三 年龄： 20 城市： 北京 </div>
兼容性说明
tab-size属性的兼容性情况如下：
- Chrome 21+、Firefox 4+、Edge 79+、Opera 15+都支持整数取值的tab-size属性
- Safari需要添加-webkit-前缀才能支持，写法为
-webkit-tab-size: 4; - IE浏览器完全不支持该属性，如果需要兼容IE，建议将代码中的制表符替换为对应数量的空格
如果需要兼容旧版本浏览器，可以使用以下兼容写法：
pre {
-moz-tab-size: 4; /* Firefox旧版本 */
-o-tab-size: 4; /* Opera旧版本 */
-webkit-tab-size: 4; /* Safari */
tab-size: 4;
}
注意事项
使用tab-size属性时需要注意以下几点：
- tab-size只影响制表符的显示宽度，不会改变文本本身的内容，复制文本时制表符仍然是一个制表符字符
- 当使用长度类型取值时，部分浏览器可能不支持，优先使用整数取值保证兼容性
- 如果元素设置了
white-space: normal，制表符会被合并为普通空白字符，tab-size属性不会生效，需要设置white-space: pre、pre-wrap等保留空白的属性