CSS Reference Property

tab-size

The tab-size property is used to determine the width of the tab character (U+0009) displayed on the page. The width can be set either by explicitly setting a length value for the width or by specifying the number of spaces displayed in place of a tab character.

The value of a tab-size property can be either a <length> value or an <integer>. Integers represent the number of space characters (U+0020) that make up the width of the tab character. Negative values are not allowed. Initially the tab size is set to 8 space characters by default.

Trivia & Notes

Usually, sequences of white spaces are collapsed into one (details in the white-space entry). When tabs are typed in the source of a page, a tab (U+0009) is converted to a sequence of spaces (U+0020) by the white space processing rules, and hence, it is collapsed and rendered as a regular space on the page. The only case when a tab is rendered as a tab on the page is when the pre formatting rule is applied to the content, whether by including the content in a <pre> tag, or by setting the value of the white-space property to pre or pre-wrap. So it would only make sense to use the tab-size property in case we’re preserving the white spaces.

Because of low browser support, you may want to use a polyfill to set the tab size.

Official Syntax

  • Syntax:

    tab-size: <integer> | <length> | inherit
  • Initial: 8
  • Applies To: block containers
  • Animatable: yes, as a length

Values

<integer>
A number that specifies the number of spaces making up a tab. Must be positive. See the <integer> entry for a list of possible values.
<length>
The width of the tab. Must be positive. See the <length> entry for a list of possible values.
inherit
Inherits the same tab size as its parent element.

Examples

The following sets the tab size to four spaces wide on all content inside a pre element.

pre {
  tab-size: 4;
}
                

Browser Support

CSS3 tab-size Support

Method of customizing the width of the tab character. Only effective using 'white-space: pre' or 'white-space: pre-wrap'.

Current Status: W3C Working Draft

Supported from the following versions:

Desktop

  • 21
  • 4*
  • No
  • 10.*
  • 6.1

Mobile / Tablet

  • 7.0
  • 4.4
  • 11*
  • 56
  • 51*

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading

Written by

Last updated December 11, 2016 at 10:49 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.