The tab-size
property is used to determine the width of the tab character (U+0009) displayed on the page. The width can be set either by explicitly setting a length value for the width or by specifying the number of spaces displayed in place of a tab character.
The value of a tab-size
property can be either a <length>
value or an <integer>
. Integers represent the number of space characters (U+0020) that make up the width of the tab character. Negative values are not allowed. Initially the tab size is set to 8 space characters by default.
Trivia & Notes
Usually, sequences of white spaces are collapsed into one (details in the white-space
entry). When tabs are typed in the source of a page, a tab (U+0009) is converted to a sequence of spaces (U+0020) by the white space processing rules, and hence, it is collapsed and rendered as a regular space on the page. The only case when a tab is rendered as a tab on the page is when the pre
formatting rule is applied to the content, whether by including the content in a <pre>
tag, or by setting the value of the white-space
property to pre
or pre-wrap
. So it would only make sense to use the tab-size
property in case we’re preserving the white spaces.
Because of low browser support, you may want to use a polyfill to set the tab size.
Official Syntax
Values
- <integer>
- A number that specifies the number of spaces making up a tab. Must be positive. See the
<integer>
entry for a list of possible values. - <length>
- The width of the tab. Must be positive. See the
<length>
entry for a list of possible values. - inherit
- Inherits the same tab size as its parent element.
Examples
The following sets the tab size to four spaces wide on all content inside a pre
element.
pre { tab-size: 4; }
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
CSS3 tab-size
Method of customizing the width of the tab character. Only effective using 'white-space: pre', 'white-space: pre-wrap', and 'white-space: break-spaces'.
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 42
- 91
- No
- 29
- 13
Mobile / Tablet
- 13
- 130
- No
- 130
- 130