CSS tab-size Property

The tab-size property is used to set the width of the tab character (U+0009) displaying on the page.

The tab-size property is one of the CSS3 properties. It 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";


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

Example of the tab-size property:

<!DOCTYPE html>
    <title>Title of the document</title>
      .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;
    <h2>Tab-size property example</h2>
    <pre class="tab1">
Lorem	ipsum	is	a...  
    <pre class="tab2">
Lorem	ipsum	is	a...


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


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.

Browser support

42.0+ x 53.0 -webkit- x 29.0+

Practice Your Knowledge

The tab-size property is only visible for

Do you find this helpful?

Related articles