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.


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.

Deploy a static site in one minute
Build and deploy a CMS-enabled site with Gatsby in just a few clicks. It's free.


  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:

    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
    Permalink to comment#

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


        <h1>Header with H1.</h1>
        <h2>Header with H2.</h2>
        Ordered List
            <ol class="search";>
        <h3>Header With H3.</h3>
        Unordered list
            <ul class="search";>

Leave 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.