`tab-size` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since August 2021.

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

Try it

tab-size: 10px;

tab-size: 16px;

tab-size: 24px;

tab-size: 4;

<section id="default-example">
  <pre id="example-element">&#9;123</pre>
</section>

#example-element {
  border: 1px solid;
}

Syntax

/* <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 non-negative. The advance width means the distance a cursor or a print head moves before printing the next character.
<length>: The width of tabs. Must be non-negative.

Formal definition

Initial value	8
Applies to	block containers
Inherited	yes
Computed value	the specified integer or an absolute length
Animation type	a <a href="/en-US/docs/Web/CSS/Reference/Values/length#interpolation" title="Values of the <length> CSS data type are interpolated as real, floating-point numbers.">length</a>

Formal syntax

tab-size = 
  <integer> |
  <length>

<integer> = 
  <number-token>

Examples

Expanding by character count

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

Collapse tabs

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

Default tab size vs custom sizes

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 characters wide</p>
<p class="custom-number">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
<p class="custom-length">&#0009;custom tab size of 50px wide</p>

CSS

body {
  border: 1px solid red;
  margin: 1rem;
}

p {
  white-space: pre;
}

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

.custom-length {
  tab-size: 50px;
}

Result

Specifications

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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`tab-size`	21 This property is not yet animatable.	79 This property is not yet animatable.	91 4 Before Firefox 53, this property was not animatable.	15 10.5–15	7	25 This property is not yet animatable.	91 4 Before Firefox for Android 53, this property was not animatable.	14 11–14	7	1.5 This property is not yet animatable.	4.4	7
`length`	42	79	53	29	13.1	42	53	29	13.4	4.0	56	13.4