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


/* <integer> values */
tab-size: 4;
tab-size: 0;

/* <length> values */
tab-size: 10px;
tab-size: 2em;

/* Global values */
tab-size: inherit;
tab-size: initial;
tab-size: unset;


A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.
The width of tabs. Must be nonnegative.

Formal definition

Initial value8
Applies toblock containers
Computed valuethe specified integer or an absolute length
Animation typea length

Formal syntax

<integer> | <length>


Expanding by character count

pre {
  tab-size: 4; /* Set tab size to 4 characters wide */

Collapse tabs

pre {
  tab-size: 0; /* Remove indentation */

Comparing to the default size

This example compares a default tab size with a custom tab size. Note that white-space is set to pre to prevent the tabs from collapsing.


<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>


p {
  white-space: pre;

.custom {
  tab-size: 3;
  -moz-tab-size: 3;



Specification Status Comment
CSS Text Module Level 3
The definition of 'tab-size' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

BCD tables only load in the browser

See also