tab-size

The tab-size CSS property is used to customize the width of tab characters (U+0009).

Try it

Syntax

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

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

/* Global values */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;

Values

<number>

A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.

<length>

The width of tabs. Must be nonnegative.

Formal definition

Initial value8
Applies toblock containers
Inheritedyes
Computed valuethe specified integer or an absolute length
Animation typea length

Formal syntax

Examples

Expanding by character count

css
pre {
  tab-size: 4; /* Set tab size to 4 characters wide */
}

Collapse tabs

css
pre {
  tab-size: 0; /* Remove indentation */
}

Comparing to the default size

This example compares a default tab size with a custom tab size. Note that white-space is set to pre to prevent the tabs from collapsing.

HTML

html
<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>

CSS

css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
}

Result

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also