CSS - tab-size 屬性

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	 tab-size with    8.
</pre>

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

</body>
</html>

CSS tab-size - 與預設大小比較

以下示例演示了預設製表符大小、3 個字元的製表符大小和 3 個空格的製表符大小。white-space: pre 可防止製表符摺疊。−

<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>

列印頁面