tab-size

tab-size sets the interval between tab stops in preserved text. A tab advances to the next stop, so it does not always occupy exactly the same number of visible spaces from its current position.

Compare real tab characters

The code contains a real tab, represented as 	 in the HTML source. The two pre blocks preserve it and use different stop intervals.

<pre class="wide">function greet() {
	return "Hello";
}</pre>
<pre class="compact">function greet() {
	return "Hello";
}</pre>

pre {
  white-space: pre;
  overflow: auto;
  font-family: monospace;
  padding: 0.5rem;
  background: #eff6ff;
}
.wide {
  tab-size: 8;
}
.compact {
  tab-size: 2;
}

Keep code indentation readable on small screens

Four-space stops give a compact indentation interval. The named region remains keyboard scrollable if long code exceeds its width.

<pre tabindex="0" role="region" aria-label="Example code"><code>function compare() {
	const result = "Change one value and compare the result";
	return result;
}</code></pre>

pre {
  tab-size: 4;
  white-space: pre;
  overflow: auto;
  max-width: 100%;
  padding: 0.75rem;
  background: #eff6ff;
}

Values and defaults

The initial value is 8 and tab-size is inherited. A nonnegative number multiplies the advance width of the space character. A nonnegative length specifies a fixed stop interval. Support for number and length forms has different history, so check the form used.

Whitespace collapsing can turn tabs into spaces before tab stops matter. Use pre, pre-wrap, or another suitable preserving white-space value. Changing tab-size does not change authored space characters or a file’s indentation bytes.

Common mistakes

This property does not control Tab-key focus navigation or add tab stops to forms. It is a text-rendering setting. Code copied from these examples retains its original tab characters; only their display interval changes.

Learn white-space, pre, and overflow. Avoid clipping code simply to hide long indentation.

Sources and browser support

MDN: tab-size describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.