tab-size

Overview

The tab-size property sets the width of tab characters tab characters (U+0009). It defines the tab width in terms of space characters (U+0020) or length units. Notably, tab-size comes into play when white space processing rules are bypassed, for instance, inside a <pre> tag or when the white-space property of an element is set to pre or pre-wrap. Otherwise, by default, a tab character in a source file is converted into a space character and subsequently collapsed to render as a single space in the browser.

Examples and Usage

To understand the tab-size property, we'll consider two examples. In the first, we display the default tab size using a <pre> element, and in the second, we customize the tab size on a <p> element by applying the white-space: pre rule.

HTML Structure

<h2>First Example</h2>
<h4>The default tab-size of 8 space characters with &lt;pre&gt;</h4>
<pre>
no tab
    1 tab
        2 tabs
</pre>

<h2>Second Example</h2>

<h4>Custom tab-size with 4 space characters on a &lt;p&gt; with 'white-space: pre'</h4>
<p class="customtabs">no tab
    1 tab
        2 tabs
</p>

CSS Styling

p.customtabs {
  /* Define tab size as 4 space characters */
  tab-size: 4;
  /* Preserve white space */
  white-space: pre;
}

In the first example, we used the <pre> element. By default, this element preserves white space and line breaks, making it an ideal context for demonstrating the default tab-size value of 8 space characters. The tab characters before "1 tab" and "2 tabs" are displayed with this default tab size, creating different levels of indentation.

In the second example, we've applied the white-space: pre rule to a <p> element, which instructs the browser to preserve white space within this element, much like the <pre> tag. We've also applied a tab-size value of 4 to the same paragraph. This reduces the width of the tab character to 4 space characters. Consequently, the tab characters before "1 tab" and "2 tabs" are now displayed with this custom tab size, resulting in less indentation than in the first example.

These examples primarily serve as a demonstration of the tab-size property. However, the behavior of the tab character (U+0009) and white space in HTML can be intricate. The tab character is often replaced by space characters (U+0020) during the white space processing in HTML, and sequences of white spaces are typically collapsed into one. Depending on the context and exact formatting of your HTML and CSS, the interpretation of tab characters and their resulting display can vary, which might lead to unexpected results.

Values

The tab-size property accepts the following values:

Associated Properties

• white-space
• word-spacing
• letter-spacing

Tips and Tricks

• Keep in mind, the tab-size property only affects the rendering of the tab character (U+0009). It does not impact the rendering of other white-space characters.

• The white-space property interacts with tab-size. To maintain the tab structure, you should use white-space: pre or white-space: pre-wrap.

• Adjusting the tab size can improve readability, especially in code blocks or preformatted text where the default tab size might be too large.

Browser Compatibility

Specific older versions of Chrome, Safari, Firefox, and Opera, require vendor prefixes to achieve partial support only for <integer> values. For more details, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: tab-size

W3C's Working Draft of CSS Text Module Level 3: tab-size