tab-size
Sets the width of the tab character (\t). Primarily used to control tab spacing in <pre> and <code> blocks.
Class List
Pattern: tbs{value}{unit} (using a number without unit means number of spaces)
| Class | CSS | Description |
|---|---|---|
tbs2 | tab-size: 2 | Tab = 2 spaces |
tbs4 | tab-size: 4 | Tab = 4 spaces (common) |
tbs8 | tab-size: 8 | Tab = 8 spaces (browser default) |
tbs2rem | tab-size: 2rem | Tab = 20px width |
tbs4rem | tab-size: 4rem | Tab = 40px width |
Usage Examples
<!-- Tab 2 spaces in code block -->
<pre class="tbs2 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- Tab 4 spaces in code block -->
<pre class="tbs4 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- Specify exact width in rem units -->
<code class="tbs2rem wspw">Tab characters are displayed with 20px width</code>Tips & Notes
Only works in pre/code
tab-size only works on elements where white-space is pre or pre-wrap. In normal text, tab characters are collapsed to spaces.