tab-size
The tab-size
CSS property is used to customize the width of tab characters (U+0009).
Try it
Syntax
css
/* <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: revert;
tab-size: revert-layer;
tab-size: unset;
Values
Formal definition
Initial value | 8 |
---|---|
Applies to | block containers |
Inherited | yes |
Computed value | the specified integer or an absolute length |
Animation type | a length |
Formal syntax
Examples
Expanding by character count
css
pre {
tab-size: 4; /* Set tab size to 4 characters wide */
}
Collapse tabs
css
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.
HTML
html
<p>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom">	custom tab size of 3 characters wide</p>
<p> 3 spaces, equivalent to the custom tab size</p>
CSS
css
p {
white-space: pre;
}
.custom {
tab-size: 3;
}
Result
Specifications
Specification |
---|
CSS Text Module Level 3 # tab-size-property |
Browser compatibility
BCD tables only load in the browser