tab-size

Controls the width of tab characters in code/preformatted text. Specify as a number of spaces or a length.

Quick example

pre { tab-size: 2; }
code { tab-size: 4; }

Syntax

<integer> | <length>

Quick facts

Initial value
8
Inherited
Yes

Examples

Make tab characters wider

pre {
  tab-size: 8;
  /* Each tab takes up 8 character widths */
}

Control how many spaces a tab character represents in preformatted text.

Standardize code display

code, pre {
  tab-size: 4;
  font-family: 'Courier New', monospace;
}

Use tab-size to match your code editor's tab width for consistent display.

tab-size Browser Support

Widely availableSince 202192% global usage

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

Safe to use without fallbacks.

42+
91+
13.1+
79+

Common pitfalls

Only works with white-space: pre

tab-size only affects how tabs display in pre, code, or elements with white-space: pre. Regular text ignores tabs anyway.

Measured in character widths, not pixels

tab-size: 4 means 4 character widths, not 4 pixels. The actual width depends on the font and font-size.

ESC