笙亿网络策划

CSS tab-size 属性怎么用？

约 3 分钟读完 40 阅
文章导读
Previous Quiz Next CSS tab-size 属性用于指定元素内 tab 字符（U+0009）的宽度。它允许您控制 tab 字符的视觉间距，这在显示代码或其他 tab 字符重要的内容时非常有用。
📋 目录
  1. A 可能的值
  2. B 适用于
  3. C 语法
  4. D CSS tab-size - 按字符数扩展
  5. E CSS tab-size - 与默认大小比较
A A

CSS - tab-size 属性

Previous
Quiz
Next

CSS tab-size 属性用于指定元素内 tab 字符（U+0009）的宽度。它允许您控制 tab 字符的视觉间距，这在显示代码或其他 tab 字符重要的内容时非常有用。

可能的值

  • <integer> − 以单个空格字符宽度的倍数指定 tab 字符的宽度。例如，值为 4 将使 tab 字符比空格字符宽四倍。不能为负值。

  • <length> − 使用固定长度值指定 tab 字符的宽度，例如像素 (px)、点 (pt) 或 em (em)。不能为负值。

适用于

块级容器。

语法

<integer> 值

tab-size: 4;
tab-size: 0;

<length> 值

tab-size: 10px;
tab-size: 2em;

CSS tab-size - 按字符数扩展

以下示例演示了 tab-size 属性如何将 tab 大小设置为 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	 tab-size with    8.
</pre>

<pre class="tab2">
CSS	 tab-size        with 12.
</pre>

</body>
</html>

CSS tab-size - 与默认大小比较

以下示例演示了默认 tab 大小、3 个字符的 tab 大小以及 3 个空格的 tab 大小。white-space: pre 防止 tab 字符折叠 −

<html>
<head>
<style> 
   p {
      white-space: pre;
   }
   .tab1 {
      tab-size: 3;
   }
</style>
</head>
<body>
   <p>Without tab-size</p>
   <p>	Default tab-size to 8 characters.</p>
   <p class="tab1">	tab-size with 3 characters.</p>
   <p>   tab-size with 3 spaces.</p>
</body>
</html>