tab-size

Summary

The tab-size CSS property is used to customise the width of a tab (U+0009) character.

Overview table

Initial value: 8
Applies to: block containers
Inherited: Yes
Media: visual
Computed value: the specified integer or an absolute length
Animatable: No

CSS Object Model Property
:

Syntax

tab-size: <integer>
tab-size: inherit

Values

<integer>: The number of spaces in a tab. Must be positive.
inherit: Inherits from the parent element.

Examples

Example of using different tab-size.

/**
Examples of using the tab-size prop
*/

.tab--size4 {
    tab-size: 4;
}

.tab--size8 {
    tab-size: 8;
}

.tab--size12 {
    tab-size: 12;
}

.tab--size0 {
    tab-size: 0;
}

View live example

Notes

The tab character (unicode U+0009) is converted to space characters (unicode U+0020) by the white space rule (default is normal) which collapses multiple white space characters. Therefor this rule only makes sense inside a parent that cancels the white-space rule. For example the pre tag (which does this by default, setting it to pre-wrap) . See the example.

Related specifications

CSS Text Module Level 3: Editor’s draft

Attributions

Mozilla Developer Network : Article