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.


  1. 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. 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. Joshua Sandoval
    Permalink to comment#

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

  4. Siva
    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.