tab-size | CSS-Tricks

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

W3 spec on the tab-size property
MDN
Original 2008 email to w3 introducing the tab-size idea

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

Chrome	Firefox	IE	Edge	Safari
42	53*	No	79	13.1

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
115	115	115	13.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.

Comments

Dave Stewart

# June 26, 2012

I recently created a jQuery plugin to correctly display tabbed content in browsers that don’t currently support tab-width:

https://github.com/davestewart/jquery-plugins/tree/master/tabSize

It uses the CSS3 property tab-size if available, but if not, it *correctly* converts tabs to spaces, including those tabs which do not take up a whole tab width, aka columns.

Mathias Bynens

# March 22, 2013

Quick note regarding the suggested polyfill: by (re)setting .innerHTML, any event handlers bound to descendant elements will be destroyed.

This applies to Dave’s plugin, too.

Joshua Sandoval

# June 29, 2014

This property actually works perfectly fine on iOS7. ( tested on iOS 7.1.1 )

Siva

# January 24, 2016

How do i add a tab space for the ordered/unordered list?

Header
left
right
footer

    <h1>Header with H1.</h1>
    <p>paragraphsparagraphsparagraphsparagraphsljslfdja
    dflksfjljsdfjlj
    fljsdfljasflkjfsdflsdf;kjdfa
    ljasfljfalsjfljljljjjljsdf
    ;alkdf;asdfka;lsfdk
    asd'kf;laskdf;k;lka
    ljdfa
    lkfja;lfjasdfjasd;fj;
    iopejrlkjdfpiasfl;kjpioerop</p>
    <p>
    <h2>Header with H2.</h2>
    </p>
    Ordered List
        <ol class="search";>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
        </ol>
    <p>
    <h3>Header With H3.</h3>
    Unordered list
        <ul class="search";>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
        </ul>
    </p>
    <p></p>
    </body>

Jass

# September 1, 2019

I don’t understand why the first demo is not working for me (FF 69-70), while the other two work (the same browser)