tab-size

Baseline 已廣泛支援

此特性已發展成熟，可在多種裝置和瀏覽器版本上使用。自 ⁨2021 年 8 月⁩ 起，它已在所有瀏覽器中可用。

tab-size CSS 屬性用於自定義製表符（U+0009）的寬度。

試一試

tab-size: 10px;

tab-size: 16px;

tab-size: 24px;

tab-size: 4;

<section id="default-example">
  <pre id="example-element">&#9;123</pre>
</section>

#example-element {
  border: 1px solid;
}

語法

css

/* <number> values */
tab-size: 4;
tab-size: 0;

/* <length> values */
tab-size: 10px;
tab-size: 2em;

/* Global values */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;

值

<number>: 作為製表符寬度的，一個空格字元（U+0020）前進寬度的倍數。必須是非負數。前進寬度是指游標或列印頭在列印下一個字元之前移動的距離。
<length>: 製表符的寬度。必須是非負數。

正式定義

初始值	`8`
應用於	塊容器
繼承性	是
計算值	指定的整數或絕對長度
動畫型別	一個長度

正式語法

tab-size = 
  <number [0,∞]>  |
  <length [0,∞]>

示例

按字元數展開

css

pre {
  tab-size: 4; /* Set tab size to 4 characters wide */
}

摺疊製表符

css

pre {
  tab-size: 0; /* Remove indentation */
}

預設製表符大小與自定義大小

此示例比較了預設製表符大小和自定義製表符大小。請注意，white-space 設定為 pre 以防止製表符摺疊。

HTML

html

<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom-number">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
<p class="custom-length">&#0009;custom tab size of 50px wide</p>

CSS

body {
  border: 1px solid red;
  margin: 1rem;
}

css

p {
  white-space: pre;
}

.custom-number {
  tab-size: 3;
}

.custom-length {
  tab-size: 50px;
}

結果

規範

規範
CSS Text Module Level 3 # tab-size-property

瀏覽器相容性

另見

white-space

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者於 ⁨2025 年 7 月 14 日⁩ 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題