tab-size

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.

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

試してみましょう

構文

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

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

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

値

<number>

タブの幅として使用する空白文字 (U+0020) のアドバンス幅の倍数です。負の値であってはなりません。アドバンス幅とは、次の文字が出力される前に、カーソルまたは印字ヘッドが移動する距離ということになります。

<length>

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

公式定義

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

形式文法

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

例

文字数による展開

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

タブの折り畳み

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

既定のタブサイズとカスタムサイズ

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

HTML

html
<p>タブなし</p>
<p>&#0009;既定の 8 文字幅のタブサイズ</p>
<p class="custom-number">&#0009;3 文字幅のカスタムタブサイズ</p>
<p>&nbsp;&nbsp;&nbsp;カスタムタブサイズと同じ 3 文字の空白</p>
<p class="custom-length">&#0009;50px 幅のカスタムタブサイズ</p>

CSS

css
p {
  white-space: pre;
}

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

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

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報