tab-size

Definition

The tab-size CSS property is used to control the width of tab characters within a block of text. It allows you to specify the visual appearance and spacing of tab characters when they are encountered in the content.

The tab-size property accepts a numeric value or the keyword value inherit. The numeric value represents the number of spaces that a tab character should occupy.

Here’s an example:

.tabbed-text {
  tab-size: 4;
}

In this example, the .tabbed-text class sets the tab-size property to 4. This specifies that tab characters within the element’s content should be rendered as if they occupy four spaces.

It’s important to note that the tab-size property affects the visual appearance of tab characters within the content, but it does not affect the behavior of tab key navigation or tab stops in interactive elements.

The tab-size property is particularly useful when working with code snippets or text that includes tab characters for indentation purposes. By adjusting the tab-size value, you can control the spacing and alignment of tab characters to achieve the desired visual representation.

Keep in mind that the tab-size property is not supported in all browsers, particularly older versions. In some cases, you may need to use alternative techniques, such as replacing tab characters with spaces or using custom CSS solutions to achieve consistent tab spacing across different browsers.

Syntax

pre {
  tab-size: 4;
}

Values

<number>: number of spaces shown for tab characters.
<length>: explicit spacing width (rare).

Practical Examples

pre {
  tab-size: 4;
}

Normalize indentation in code samples regardless of authoring environment.

HTML

function greet() {
	console.log('Wide tabs');
}

function greet() {
	console.log('Compact tabs');
}

Code

<div class="grid gap-4 sm:grid-cols-2 text-sm text-slate-700">
  <pre class="rounded-xl border border-slate-200 bg-slate-50 p-4 shadow-sm" style="tab-size: 8;">function greet() {
	console.log('Wide tabs');
}</pre>
  <pre class="rounded-xl border border-slate-200 bg-slate-50 p-4 shadow-sm" style="tab-size: 2;">function greet() {
	console.log('Compact tabs');
}</pre>
</div>

Tips & Best Practices

Apply at the pre or code-block wrapper level to affect all contained tabs.
Minimize reliance on literal tab characters—many linters convert to spaces by default.
Test with accessibility tooling; excessive indentation can trigger horizontal scrolling.

Accessibility & UX Notes

Consistent tab widths make code easier to scan for assistive technology users.

Browser Support

Widely supported. Older IE ignores the property.

white-space for preserving formatting.
font-family (monospace) to keep characters aligned.
overflow-x when code blocks exceed width.