tab-size

CSS の tab-size プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

構文

css
/* <integer> 値 */
tab-size: 4;
tab-size: 0;

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

/* グローバル値 */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: unset;

試してみましょう

<integer>

タブの幅として使用される空白文字(U+0020)の幅の倍数です。正の数でなければなりません。

<length>

タブの幅です。正の数でなければなりません。

公式定義

初期値8
適用対象ブロックコンテナー
継承あり
計算値指定された整数値または絶対的な長さ
アニメーションの種類length

形式文法

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

文字数による展開

css
pre {
  tab-size: 4; /* スペース 4 つ分となります */
}

タブの折り畳み

css
pre {
  tab-size: 0; /* インデント除去 */
}

既定の大きさの比較

この例では、既定のタブの大きさとカスタムのタブの大きさを比較しています。タブがつぶれないように、 white-spacepre に設定していることに注意してください。

HTML

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

CSS

css
p {
  white-space: pre;
}

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

結果

仕様書

Specification
CSS Text Module Level 3
# tab-size-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報