Grow your CSS skills. Land your dream job.

tab-size

Last updated on:

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".