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
/* <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;
試してみましょう
値
公式定義
初期値 | 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>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom">	custom tab size of 3 characters wide</p>
<p> 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
関連情報
- Controlling size of a tab character (U+0009) - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール