The tab-size
CSS property is used to customize the width of tab characters (U+0009).
Syntax
/* <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;
Values
<integer>
- A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.
<length>
- The width of tabs. Must be nonnegative.
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
<integer> | <length>
Examples
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.
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
p {
white-space: pre;
}
.custom {
tab-size: 3;
-moz-tab-size: 3;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3The definition of 'tab-size' in that specification. | Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
tab-size
|
Chrome Full support 21 Full support 21 Notes' This property is not yet animatable. |
Edge Full support 79 Full support 79 Notes' This property is not yet animatable. |
Firefox Full support 4 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- Notes' See bug 737785 for the status of unprefixing this property. Notes' Before Firefox 53, this property was not animatable. |
IE
No support No |
Opera Full support 15 Full support 15 Full support 10.5 Prefixed' Implemented with the vendor prefix: -o- |
Safari
Full support 6.1 |
WebView Android
Full support 4.4 |
Chrome Android Full support 25 Full support 25 Notes' This property is not yet animatable. |
Firefox Android Full support 4 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- Notes' See bug 737785 for the status of unprefixing this property. Notes' Before Firefox 53, this property was not animatable. |
Opera Android Full support 14 Full support 14 Full support 11 Prefixed' Implemented with the vendor prefix: -o- |
Safari iOS
Full support 7 |
Samsung Internet Android Full support 1.5 Full support 1.5 Notes' This property is not yet animatable. |
<length>
|
Chrome
Full support 42 |
Edge
Full support 79 |
Firefox
Full support 53 |
IE
No support No |
Opera
Full support 29 |
Safari
No support No |
WebView Android
Full support 56 |
Chrome Android
Full support 42 |
Firefox Android
Full support 53 |
Opera Android
Full support 29 |
Safari iOS
No support No |
Samsung Internet Android
Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- Controlling size of a tab character (U+0009), an email by Anne van Kesteren to the CSSWG.
tab-size by Mozilla Contributors is licensed under CC-BY-SA 2.5.