tab-size：タブ（tab）文字の表示幅を指定する

X
f
LINE
B!
p

初期値	`8`
適用対象	ブロックコンテナ
継承	する
アニメーション	<length>値
対応ブラウザ	caniuseで確認

tab-sizeプロパティの説明

tab-sizeは、タブ（tab）文字の表示幅を指定します。タブ文字はユニコードのU+0009に該当します。主にタブはプログラミングやマークアップのインデントで使われます。

tab-sizeに指定できる値

<integer>: タブの幅を空白文字（U+0020）の倍数で示します。負の値は使用できません。初期値は8です。
<length>: タブの幅をCSSで使用できる長さを表す単位付きの数値で表します。負の値は使用できません。

tab-sizeの使い方とサンプル

tab-sizeプロパティの構文は以下の通りです。

CSS

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

/* <length>値 */
tab-size: 16px;
tab-size: 4ex;
tab-size: 1rem;

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

tab-sizeの実例

それでは実際にtab-sizeプロパティの書き方を見ていきましょう。以下の例は、タブの範囲に色を付けて視覚的に把握できるようにした上で、それぞれのタブのサイズを変更したものです。タブによって確保されるホワイトスペースを、そのまま画面に表示させるためにはwhite-spaceプロパティの値をpreにする必要があります。

HTMLでタブを表現するには特殊文字の表記を使います。ここでは、数値文字参照の一種である	を使って画面にタブを表示します。

表示確認

CSS

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > p {
	margin: 1rem 0 0;
	padding: .5rem;
	background: #fff;
	white-space: pre;
}
p > span {
	border: 1px solid rgba(255, 0, 0, 0.5);
	background-color: rgba(255, 0, 0, 0.3);
}
#ts_0 {
	tab-size: 0;
}
#ts_2 {
	tab-size: 2;
}
#ts_4 {
	tab-size: 4;
}

HTML

<div class="samp_box">
	<p id="ts_0"><span>&#0009;</span>tab-size: 0;</p>
	<p id="ts_2"><span>&#0009;</span>tab-size: 2;</p>
	<p id="ts_4"><span>&#0009;</span>tab-size: 4;</p>
</div>