Tab-size property
Last updated: 2026-09-13
tab-size Tab-size property
The tab-size CSS property sets the width of a tab character (\t) as it is displayed on the page, typically used to control indentation in code blocks and pre elements. The default is 8.
| Category | |
|---|---|
| Initial Value | 8 |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
tab-size: <integer> | <length>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<integer> | Type | Tab width as a number of spaces |
<length> | Type | A fixed tab width as a length |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| tab-size | ✓ v21 | ✓ v12 | ✓ v9 | ✓ v6.1 | ✓ v15 |
| Supported in all major browsers | |||||
Tip： Combine with white-space: pre or pre-wrap to keep the tab indentation from the source code.
Tip： For code blocks, 2 or 4 is recommended over the default 8 for a more compact look.
❓ FAQ
QDoes the tab-size property support decimal or fractional values in CSS?
AThe <integer> form only accepts whole numbers; the <length> form accepts decimal lengths such as 4px, but the integer form is the most common. Browser implementations typically treat a tab as advancing to the next tab stop at multiples of the width.
QIs the tab-size property useful for Chinese text content on a web page?
AIt only affects tab characters in the text, usually found in code blocks (paired with white-space: pre to keep indentation). Ordinary Chinese paragraphs do not use tab indentation, so there is no visible effect.
QHow do I make tab indentation narrower in code blocks using CSS?
ASet tab-size: 2 or 4 on pre or code instead of the default 8 spaces for more compact, readable code. It must be paired with white-space: pre or pre-wrap, otherwise browsers collapse the tabs into spaces.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
