The tab-size CSS property is used to customize the width of tab characters (U+0009).

/* <integer> values */ tab-size: 4; tab-size: 0;  /* <length> values */ tab-size: 10px; tab-size: 2em;  /* Global values */ tab-size: inherit; tab-size: initial; tab-size: revert; tab-size: unset; 

tab-size

The tab-size CSS property is used to customize the width of tab characters (U+0009).

Syntax

/* <integer> values */ tab-size: 4; tab-size: 0;  /* <length> values */ tab-size: 10px; tab-size: 2em;  /* Global values */ tab-size: inherit; tab-size: initial; tab-size: revert; tab-size: unset; 

Values

<integer>

A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.

<length>

The width of tabs. Must be nonnegative.

Formal definition

Initial value	8
Applies to	block containers
Inherited	yes
Computed value	the specified integer or an absolute length
Animation type	a length

Formal syntax

<integer> | <length>

Examples

Expanding by character count

pre {   tab-size: 4; /* Set tab size to 4 characters wide */ } 

Collapse tabs

pre {   tab-size: 0; /* Remove indentation */ } 

Comparing to the default size

This example compares a default tab size with a custom tab size. Note that white-space is set to pre to prevent the tabs from collapsing.

HTML

<p>no tab</p> <p>&#0009;default tab size of 8 characters wide</p> <p class="custom">&#0009;custom tab size of 3 characters wide</p> <p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p> 

CSS

p {   white-space: pre; }  .custom {   tab-size: 3; } 

Result

Specifications

Specification
CSS Text Module Level 3 # tab-size-property

See also

Controlling size of a tab character (U+0009), an email by Anne van Kesteren to the CSSWG. Select your preferred language English (US)DeutschFrançais日本語한국어Русский中文 (简体) Change language