Revision 236726 of tab-size

  • Revision slug: CSS/tab-size
  • Revision title: tab-size
  • Revision id: 236726
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment 10 words added, 13 words removed

Revision Content


The tab-size CSS property is used to customize the width of a tab (U+0009) character.

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: 8
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified


tab-size: <integer> | inherit


{{ Xref_cssinteger() }}
The number of spaces in a tab. Must be positive.
Inherits from the parent element.


pre {
  tab-size: 4; /* Set tab size to 4 spaces */
pre {
  tab-size: 0; /* Remove indentation */
pre {
  tab-size: 99; /* Don't use tabs! */


Specification Status Comment
CSS Text Level 3 {{ Spec2('CSS3 Text') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }} {{ CompatUnknown() }} 10.60{{ property_prefix("-o") }} {{ CompatNightly() }} (537.1)
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Revision Source

<p>The <code>tab-size</code> CSS property is used to customize the width of a tab (<code>U+0009</code>) character.</p>
<style type="text/css"><![CDATA[.cssprop {
  padding: 0.4em;
  border-left:0.15em solid;
.cssprop li {
 padding: 3px;
.cssprop li dfn {
  padding: 0 5px;
  border-bottom: none;

<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> 8</li> <li><dfn>Applies to:</dfn> all elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
<pre>tab-size: &lt;integer&gt; | inherit
<dl> <dt>{{ Xref_cssinteger() }}</dt> <dd>The number of spaces in a tab. Must be positive.</dd> <dt>inherit</dt> <dd>Inherits from the parent element.</dd>
<pre>pre {
  tab-size: 4; /* Set tab size to 4 spaces */
<pre>pre {
  tab-size: 0; /* Remove indentation */
<pre>pre {
  tab-size: 99; /* Don't use tabs! */
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="" title="">CSS Text Level 3</a></td> <td>{{ Spec2('CSS3 Text') }}</td> <td> </td> </tr> </tbody>
<h2 style="clear: both">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}</td> <td>{{ CompatUnknown() }}</td> <td>10.60{{ property_prefix("-o") }}</td> <td>{{ CompatNightly() }} (537.1)</td> </tr> </tbody> </table>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>iOS Safari</th> <th>Opera Mini</th> <th>Opera Mobile</th> <th>Android Browser</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
<h2>See also</h2>
<ul> <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li><a class="external" href="" title=""><cite>Controlling size of a tab character (U+0009)</cite></a>, an email by Anne van Kesteren (Opera) to the CSSWG.</li>
Revert to this revision