Codectionary / Developer documentation / CSS

Displaying Tabs with tab-size

tab-size controls the advance of tab characters in text whose whitespace is preserved.

What it is and why to use it

tab-size controls the advance of tab characters in text whose whitespace is preserved. It is useful for code samples or plain-text previews that contain actual tabs. The property does not reformat the underlying text or turn spaces into tabs.

Common mistakes and limitations

With ordinary collapsed whitespace, tabs may collapse like spaces and the effect may not be visible. Tab stops depend on the font and current position, so tabs are not a robust replacement for HTML tables. Preserve copyable source text intentionally.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<pre class="code">name	score
John	87
James	92</pre>

Syntax

tab-size: 4;

Examples

Displaying Tabs with tab-size

Run the CSS against the supplied HTML, then experiment with the values.

.code { white-space: pre; overflow: auto; tab-size: 4; padding: 1rem; background: #eff6ff; color: #0f172a; font-family: monospace; }
  1. The pre element preserves real tab and newline characters.
  2. tab-size:4 sets a tab-stop interval based on four space advances; a tab moves to the next stop rather than always adding four visible spaces.
  3. Change the number to 8 and compare the columns. Horizontal scrolling keeps wide code reachable in a narrow preview.
HTML used by this example
<div class="demo"><pre class="code">name	score
John	87
James	92</pre></div>

Best practices

  • With ordinary collapsed whitespace, tabs may collapse like spaces and the effect may not be visible. Tab stops depend on the font and current position, so tabs are not a robust replacement for HTML tables. Preserve copyable source text intentionally.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading