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 2021年8月.
CSS の tab-size プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。
試してみましょう
tab-size: 10px;
tab-size: 16px;
tab-size: 24px;
tab-size: 4;
<section id="default-example">
<pre id="example-element"> 123</pre>
</section>
#example-element {
border: 1px solid;
}
構文
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;
値
公式定義
| 初期値 | 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>	既定の 8 文字幅のタブサイズ</p>
<p class="custom-number">	3 文字幅のカスタムタブサイズ</p>
<p> カスタムタブサイズと同じ 3 文字の空白</p>
<p class="custom-length">	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 |
ブラウザーの互換性
Loading…