The tab-size property sets the rendered width of each tab character (U+0009). A number means that many space widths. A length such as 2em sets an absolute width.
It is most useful on <pre> and code samples where tabs are preserved. Pair it with white-space: pre, pre-wrap, or break-spaces. The property is inherited. The initial value is 8.
Not deprecated. Older Firefox used the prefix -moz-tab-size; modern browsers use unprefixed tab-size.
tab-size: <number> | <length>;Example: tab-size: 4; or tab-size: 2em;. Values must be non-negative.
tab-sizePreserve tabs in the markup, then set how wide each tab should look.
<pre> (or set white-space: pre / pre-wrap).tab-size to a number (common: 2 or 4) or a length.font-family so columns line up clearly.| Piece | Required? | Role |
|---|---|---|
| Preserved whitespace | Yes | pre / pre-wrap / break-spaces |
| Tab characters in content | Yes | Spaces alone are not affected |
| Number or length | Yes | How wide each tab renders |
The sample uses a real tab before each number. Change tab-size and watch the indent change.
Each snippet focuses on tab-size. Extra styles stay minimal for study. Use Try It Yourself for a live editor.
A common code style: each tab looks four spaces wide.
<style>
pre {
tab-size: 4;
}
</style>
<pre> line
nested</pre>pre. It keeps tab characters instead of collapsing them.tab-size: 4 makes each tab four space-widths wide.Set an absolute tab width with a length unit.
<style>
pre {
tab-size: 2em;
}
</style>
<pre> line
nested</pre>2em is relative to the element’s font size.4, this is not “four spaces” — it is a fixed measure.em.pre.Collapse tab width to nothing with tab-size: 0.
<style>
pre {
tab-size: 0;
}
</style>
<pre> line
nested</pre>0.0 to 4 to see the difference.2 or 4, not 0.If tabs look unchanged, one of these is usually why.
tab-size ignores indentation made with space characters. The content must contain U+0009 tabs.
With default white-space: normal, tabs collapse. Use pre, pre-wrap, or break-spaces.
Many editors insert spaces on Tab. Check that the file actually stores tab characters.
Only non-negative numbers and lengths are allowed. Invalid values are ignored.
-moz-tab-sizeUnprefixed tab-size is enough for modern browsers. Keep the prefix only if you must support very old Firefox.
tab-size is a browser CSS property for rendering tab characters. Node.js, Deno, and Bun do not apply it.
Chrome 42+, Edge 79+, Firefox 91+, Safari 13.1+ / iOS 13.4+. Not supported in Internet Explorer.
Bottom line: Safe for modern sites. Prefer unprefixed tab-size. This is not a JavaScript runtime API.
8. Common code values are 2 and 4.white-space: normal hide the effect.One line: tab-size controls tab width in preformatted text — not regular space indentation.
Choose fixed or automatic algorithms for table column widths.
8 people found this page helpful