This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

/* <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: unset;

Initial value8
Applies toblock containers
Inheritedyes
Mediavisual
Computed valuethe specified integer or an absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

<integer>
The number of spaces in a tab. Must be nonnegative.
<length>
The width of a tab. Must be nonnegative.

Formal syntax

<integer> | <length>

Examples

pre {
  tab-size: 4; /* Set tab size to 4 spaces */
}
pre {
  tab-size: 0; /* Remove indentation */
}
pre {
  tab-size: 2; /* Set tab size to 2 spaces */
}

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'tab-size' in that specification.
Working Draft Initial definition

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support211 No4 -moz- 2 3 No

15

10.5 -o-

6.1
<length>42 No53 No29 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4.4 ? ?4 -moz- 2 3

24

11.5 -o-

7.1 ?
<length>56 ? ?5337 No ?

1. This property is not yet animatable.

2. See bug 737785 for the status of unprefixing this property.

3. Before Firefox 53, this property was not animatable.

 

See also

Document Tags and Contributors

 Last updated by: fscholz,