CSS tab-size Property

Description

The tab-size CSS property is used to control the width of tab characters within an element's content. It allows web developers to specify the number of space characters that a tab character should occupy when displayed in the browser. This property is particularly useful for maintaining consistent and readable code formatting, as it helps ensure that code and text are aligned properly when tabs are used. By setting the tab-size property, developers can ensure that tab characters are visually consistent across different platforms and devices, making it easier to manage code indentation and improve code readability.

Initial value: 8
Applies to: block containers
Inherited: Yes
Computed value: the specified integer or an absolute length
Animatable: a length
JavaScript syntax: object.style.tabSize

Interactive Demo

tab-size: 10px;

tab-size: 2em;

tab-size: 40px;

tab-size: 6;

	Tab Size Demo

Syntax

tab-size: <integer> | <length>

Values

<integer>The number of spaces in a tab. Must be positive value.
<length>The width of a tab. Must be positive value.

Example

HTML

<pre>

   <div class="test">Tabs&#9;for&#9;example&#9;are&#9;located&#9;between&#9;words</div> 

   <div class="test2">Tabs&#9;for&#9;example&#9;are&#9;located&#9;between&#9;words</div> 

   <div class="test3">Tabs&#9;for&#9;example&#9;are&#9;located&#9;between&#9;words</div> 

   <div class="test4">Tabs&#9;for&#9;example&#9;are&#9;located&#9;between&#9;words</div> 

   <div class="test5">Tabs&#9;for&#9;example&#9;are&#9;located&#9;between&#9;words</div> 

</pre>

CSS

div { 
   border: 1px solid blue; 
   background: azure;  
} 
.test { 
   -moz-tab-size: 8; 
   tab-size: 8; 
} 
.test2 { 
   -moz-tab-size: 12; 
   tab-size: 12; 
} 
.test3 { 
   -moz-tab-size: 16; * to support Firefox * / 
   tab-size: 16; 
} 
.test4 { 
   -moz-tab-size: 7em;
   tab-size: 7em;
} 
.test5 { 
   -moz-tab-size: 40px; 
   tab-size: 40px; 
}

Result

Editor