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:

<h3>Example 1</h3>
<h4>&lt;pre&gt; with default tab-size of 8 space characters</h4>
without tab
	with 1 tab
		with 2 tabs

<h3>Example 2</h3>

<h4>&lt;p&gt; with tab-size customized to 4 space characters and 'white-space: pre-wrap'</h4>
<p class="fourtabs">without tab
	with 1 tab
		with 2 tabs		
<h4>&lt;p&gt; with tab-size customized to 4 space characters, but without 'white-space: prewrap'</h4>
<p>without tab
	with 1 tab
		with 2 tabs		

<h3>Example 3</h3>
<h4>&lt;pre&gt; with tab-size set to 12 space characters</h4>
<pre class="twelvetabs">without tab
	with 1 tab
		with 2 tabs	
p.fourtabs {
	-moz-tab-size: 4;
	-o-tab-size:  4;
  white-space: pre-wrap;

pre.twelvetabs {
	tab-size: 12;
	-moz-tab-size: 12;
	-o-tab-size:  12;

h4 {
 margin-bottom: 0px;

body {

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-spaceproperty 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:

<h1>A Tab-Size Polyfill</h1>

<p>About as simple as it gets. This script checks if your browser supports <code>tab-size</code>, and if not converts all tabs to a certain number of spaces.</p>

<p>This polyfill is purely a vanity thing, for those of us who can%u2019t stand uber-wide tab characters.</p>

	My tab is only 4 spaces wide!

	Mine too!
pre, textarea {
  tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  -webkit-tab-size: 4;
//Set your tab size here, and in the CSS.
var tabSize = 4;
var codeElements = document.getElementsByTagName('code'),
    textareas = document.getElementsByTagName('textarea'),
    e = document.createElement('i');

if( !== '' && !== '' && !== '')

function replaceTabs(ele)
  for(var i = 0; i < ele.length; i  )
    ele[i].innerHTML = ele[i].innerHTML.replace(/\t/g, repeat(" ", tabSize));

function repeat(st, n) {
   var s = "";
   while (--n >= 0) {
     s  = st
   return s;

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.

Leave a Reply

Your email address will not be published. Required fields are marked *