{"id":16278,"date":"2012-02-12T18:09:08","date_gmt":"2012-02-13T01:09:08","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=16278"},"modified":"2019-08-17T11:38:07","modified_gmt":"2019-08-17T18:38:07","slug":"tab-size","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/tab-size\/","title":{"rendered":"tab-size"},"content":{"rendered":"

The tab-size<\/code> property in CSS is used to adjust the amount of spaces that display for the tab character.<\/p>\n

pre {\r\n  tab-size: 8; \/* default. Pretty big! *\/\r\n\r\n  tab-size: 2;\r\n  tab-size: 13px; \/* you can set a width-per-tab also *\/\r\n}<\/code><\/pre>\n
Have a play with these range sliders to see how different values effect how tabs render (when you can actually see tabs):<\/p>\n
\n  See the Pen 
\n  rNBLYaP<\/a> by Chris Coyier  (@chriscoyier<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
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<\/code> property is only useful when the white space processing rules do not apply, namely inside a <pre><\/code> tag and when the white-space<\/code><\/a> property of an element is set to pre-wrap<\/code>.<\/p>\n
The default value for the tab-size<\/code> property is 8 space characters, and it can accept any positive integer value.<\/p>\n
He are some examples of the various ways tab-size<\/code> can be used:<\/p>\n
\n  See the Pen 
\n  rNBLYjg<\/a> by Chris Coyier  (@chriscoyier<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
As you can see in the examples above, the tab-size<\/code> property adjusts the amount of space allotted for the tab character. In the second example, the <p><\/code> tag has to have its white-space<\/code> property adjusted to pre-wrap<\/code> in order for the tab characters to not be converted to regular spaces and collapsed.<\/p>\n
You will also notice in the CSS that the -moz-<\/code> and -o-<\/code> prefixes are required for Firefox and Opera, but Chrome accepts the non-prefixed version.<\/p>\n
Polyfill<\/h3>\n
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):<\/p>\n
\n  See the Pen 
\n  tab-size polyfill<\/a> by CSS-Tricks (@css-tricks<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
Other Resources<\/h3>\n