CSS Property tab-size

The CSS tab-size property controls the number of spaces to show 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.

The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.

The tab character is usually displayed as a single space-character, except for textarea and pre.

The result of the tab-size property will only be visible for these elements.

Summary

Initial value: 8
Inherited: yes
CSS Version: CSS3
JavaScript syntax: object.style.tabSize="16"
Animatable: no

CSS Syntax

tab-size: number|length;

Property Values

number: Default value 8. Set the number of space-characters to display tab-character
length: Specifies the length of a tab-character.

Browser compatibility


`tab-size`	Yes	No	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
#t1 {<!--from  www .  ja  v  a 2s. co  m-->
    -moz-tab-size: 4; /* Code for Firefox */
    -o-tab-size: 4; /* Code for Opera 10.6-12.1 */
    tab-size: 4;
}

#t2 {
    -moz-tab-size: 16; /* Code for Firefox */
    -o-tab-size: 16; /* Code for Opera 10.6-12.1 */
    tab-size: 16;
}
</style>
</head>
<body>

<pre id="t1">
I  use  tab-size  4
</pre>

<pre id="t2">
I  use  tab-size  16
</pre>

</body>
</html>

Click to view the demo

Example 2

<!DOCTYPE html>
<html>
<style>
p.fourtabs {<!-- ww  w.jav  a 2 s .  co  m-->
  tab-size:4;
  -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 {
 color:#e08628;
 margin-bottom: 0px;
}

body {
 background-color:#efefef;
 color:#3c3c3c;
}
</style>
</head>
<body>
<h4>&lt;pre&gt; with default tab-size of 8 space characters</h4>
<pre>
without tab
  with 1 tab
    with 2 tabs
</pre>

<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    
</p>
<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    
</p>

<h4>&lt;pre&gt; with tab-size set to 12 space characters</h4>
<pre class="twelvetabs">without tab
  with 1 tab
    with 2 tabs  
</pre>
</body>
</html>

Click to view the demo