CSS tab-size Property

The tab-size property sets the width of a tab character.

The tab-size property is only visible for <textarea> and <pre> HTML tags.

Negative values are invalid.

For maximum browser compatibility -moz- for Firefox and -o- for Opera extensions are used with this property.

Initial Value 8
Applies to Block containers.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.tabSize = "20";

Syntax

tab-size: number | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .tab1 {
      -moz-tab-size: 5; /* Firefox */
      -o-tab-size: 5; /* Opera 10.6-12.1 */
      tab-size: 5;
      }
      .tab2 {
      -moz-tab-size: 20; /* Firefox */
      -o-tab-size: 20; /* Opera 10.6-12.1 */
      tab-size: 20;
      }
    </style>
  </head>
  <body>
    <h2>Tab-size property example</h2>
    <pre class="tab1">
Lorem	ipsum	is	a...  
</pre>
    <pre class="tab2">
Lorem	ipsum	is	a...
</pre>
  </body>
</html>

In the given example the tab-size of the first element is 5, the one of the second element is 20.

Values

Value Description
number Sets the number of the space characters in the tab. Negative values are invalid. The default value is 8.
length Sets the width of the tab. Negative values are invalid. This value is not supported by major browsers.
initial Makes the property use its default value.
inherit Inherits the property from its parent element.

Practice Your Knowledge

The tab-size property is only visible for




Related articles