tab-size

Avatar of Chris Coyier
Chris Coyier on (Updated on )

The tab-size property in CSS is used to adjust the amount of spaces that display for the tab character.

pre {
  tab-size: 8; /* default. Pretty big! */

  tab-size: 2;
  tab-size: 13px; /* you can set a width-per-tab also */
}

Have a play with these range sliders to see how different values effect how tabs render (when you can actually see tabs):

See the Pen
rNBLYaP
by Chris Coyier (@chriscoyier)
on CodePen.

The tab character (unicode U+0009) is typically converted to spaces (unicode U+0020) by the white space processing rules and then collapsed so that only one space in a row is displayed in the browser. Therefore the tab-size property is only useful when the white space processing rules do not apply, namely inside a <pre> tag and when the white-space property of an element is set to pre-wrap.

The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.

He are some examples of the various ways tab-size can be used:

See the Pen
rNBLYjg
by Chris Coyier (@chriscoyier)
on CodePen.

As you can see in the examples above, the tab-size property adjusts the amount of space allotted for the tab character. In the second example, the <p> tag has to have its white-space property adjusted to pre-wrap in order for the tab characters to not be converted to regular spaces and collapsed.

You will also notice in the CSS that the -moz- and -o- prefixes are required for Firefox and Opera, but Chrome accepts the non-prefixed version.

Polyfill

The eight-space default is awfully large. If you need to support an unsupported browser, you could use this polyfill (the JavaScript in this Pen):

See the Pen
tab-size polyfill
by CSS-Tricks (@css-tricks)
on CodePen.

Other Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
4253*No7913.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12312412313.4-13.7

This property degrades very gracefully. Every browser supports tab characters. Lack of support for this property doesn’t break anything, the browser merely displays eight-character wide tabs instead.