CSS tab-size Property

What You’ll Learn

The tab-size property lets you control how wide tab characters appear in preformatted text. It is a simple way to make code blocks easier to read on documentation and tutorial pages.

Introduction

The tab-size property in CSS allows developers to control the width of tab characters within an element.

By default, the width of a tab character is equivalent to 8 spaces, but this property lets you customize it to better fit the design and readability requirements of your web pages.

Definition and Usage

Apply tab-size to elements that preserve whitespace and contain real tab characters — most often <pre> and <code> blocks in tutorials, docs, and code snippets.

The value can be a positive integer (number of space widths) or a CSS length such as 2rem.

📝 Syntax

The syntax for the tab-size property is simple and can be applied to block-level or inline-level elements that display tab characters:

element {
  tab-size: value;
}

Here, value can be a positive integer or a length value that defines the width of the tab character.

Basic Example

pre {
  tab-size: 4;
}

Syntax Rules

• Use a positive integer to match common editor settings like 2 or 4 spaces per tab.
• Use a length value (px, em, rem) for precise control.
• Pair with white-space: pre or pre-wrap so tabs are preserved.
• The property is inherited, so you can set it once on a parent container.

Related Properties

• white-space — preserves spaces and tab characters
• font-family — monospace fonts improve code readability
• overflow — handles long code lines in scrollable panels

🎯 Default Value

The default value of the tab-size property is 8, which means the width of a tab character is equivalent to 8 spaces.

💎 Property Values

When to Use tab-size

tab-size helps whenever preformatted text includes tab characters:

• Documentation sites — Match the tab width used in your source code examples.
• Tutorial pages — Keep indented JavaScript, Python, or HTML samples aligned and readable.
• Code playgrounds — Display pasted code with predictable indentation.
• Terminal output — Preserve tab-aligned columns in log or CLI snippets.

If your HTML uses spaces instead of tabs for indentation, convert the content or keep using spaces — tab-size will not change spacing made with space characters.

Examples Gallery

Start with the reference 4-space tab setting, try compact 2-space tabs, explore length values, and style a documentation code block.

<style>
  pre {
    tab-size: 4;
  }
</style>

<pre>
function example() {
    let x = 1;
    let y = 2;
    return x + y;
}
</pre>

.compact-code {
  white-space: pre;
  tab-size: 2;
  font-family: monospace;
}

pre {
  font-size: 0.95rem;
  tab-size: 2rem;
}

.docs-code {
  white-space: pre-wrap;
  tab-size: 4;
  font-family: ui-monospace, monospace;
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.5rem;
}

tab-size in the family

tab-size controls tab character width, but the content must preserve whitespace. Pair it with white-space: pre or pre-wrap and a monospace font so code blocks stay aligned and readable.

pre {
  white-space: pre;
  tab-size: 4;
  font-family: ui-monospace, monospace;
}

💡 Best Practices