tab-size

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

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:

Check out this Pen!

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:

Check out this Pen!

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
21+ Nightly build (537.1) 4+ 10.60+ Nope Nope Nope

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

  1. User Avatar
    Dave Stewart
    Permalink to comment#

    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.

  2. User Avatar
    Mathias Bynens
    Permalink to comment#

    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.

  3. User Avatar
    Joshua Sandoval
    Permalink to comment#

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

  4. User Avatar
    Siva
    Permalink to comment#

    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>
    

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag