CSS tab-size Property
How to use the tab-size CSS property to specify the width between the character in the tab. Read about the property values and see examples.
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 visible on any element where whitespace is preserved (e.g., using white-space: pre, pre-wrap, or pre-line), such as <textarea> and <pre>.
Info
Negative values are invalid.
| Initial Value | 8 |
|---|---|
| Applies to | All elements, but only affects block containers and elements with preserved whitespace. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.tabSize = "20"; |
Syntax
CSS tab-size syntax
tab-size: number | length | initial | inherit;Example of the tab-size property:
CSS tab-size code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.tab1 {
tab-size: 5;
}
.tab2 {
tab-size: 20;
}
</style>
</head>
<body>
<h2>Tab-size property example</h2>
<pre class="tab1">
Lorem ipsum is a...
</pre>
<pre class="tab2">
Lorem ipsum is a...
</pre>
</body>
</html>Result
In the given example, the tab-size of the first element is 5, the one of the second element is 20.
Values
| Value | Description | Play it |
|---|---|---|
| number | Sets the number of space characters in a tab. Negative values are invalid. The default value is 8. | Play it » |
| length | Sets the width of the tab. Negative values are invalid. This value is widely supported by modern browsers. | |
| initial | Makes the property use its default value. | |
| inherit | Inherits the property from its parent element. |
Practice
Practice
What does the 'tab-size' property in CSS do?