CSS tab-size 属性用于指定元素内制表符 ((U+0009)) 的宽度。它允许您控制制表符的视觉间距,这在显示制表符很重要的代码或其他内容时非常有用。
属性值
<integer>: 将制表符的宽度指定为单个空格字符宽度的倍数。例如,值 4 将使制表符比空格字符宽四倍。它不能为负数。
<length>: 使用固定长度值指定制表符的宽度,例如像素 (px)、点 (pt) 或 em (em) 。它不能为负数。
适用范围
块容器。
语法
<integer> 值
tab-size: 4;
tab-size: 0;
<length> 值
tab-size: 10px;
tab-size: 2em;
CSS tab-size: 按字符数扩展
以下示例演示 tab-size 属性如何将制表符大小设置为 8 个字符制表符大小为 12 个字符 -
<html>
<head>
<style>
.tab1 {
-moz-tab-size: 8;
tab-size: 8;
}
.tab2 {
-moz-tab-size: 12;
tab-size: 12;
}
</style>
</head>
<body>
<pre class="tab1">
CSS 制表符大小为 8。
</pre>
<pre class="tab2">
CSS 制表符大小为 12。
</pre>
</body>
</html>
CSS tab-size: 与默认大小比较
以下示例演示了默认制表符大小、3 个字符的制表符大小以及制表符大小共 3 个空格。空白:pre 可以防止选项卡折叠。 -
<html>
<head>
<style>
p {
white-space: pre;
}
.tab1 {
tab-size: 3;
}
</style>
</head>
<body>
<p>不带制表符尺寸</p>
<p> 默认制表符大小为 8 个字符。</p>
<p class="tab1"> 制表符大小为 3 个字符。</p>
<p> 制表符大小,包含 3 个空格。</p>
</body>
</html>