tab-size

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

/* <integer> 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: unset;

Syntax

Values

<integer>

The number of spaces in a tab. Must be nonnegative.

<length>

The width of a tab. Must be nonnegative.

Formal syntax

<integer> | <length>

Examples

pre {
  tab-size: 4; /* Set tab size to 4 spaces */
}

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

pre {
  tab-size: 2; /* Set tab size to 2 spaces */
}

Live sample

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

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

CSS

p {
  white-space: pre;
}

.custom {
  -moz-tab-size: 3;
  tab-size: 3;
}

Result

Specifications

Browser compatibility

See also

• Controlling size of a tab character (U+0009), an email by Anne van Kesteren to the CSSWG.