CSS tab-size Property

The tab-size CSS property controls the width used to display tab characters (U+0009) within rendered text. Rather than altering the tab characters themselves, it determines how many character columns a tab counts for when the browser computes tab stops and aligns following content. This affects visual layout in any text that contains literal tab characters — commonly seen in source code blocks, preformatted text, or data pasted from plain-text sources — and helps preserve or adjust alignment without changing the underlying text.

Rendering of tab characters with tab-size is influenced by the text flow: tabs create tab stops that the renderer advances to, so the placement of subsequent characters depends on the tab stop grid which is derived from the computed tab width and the start of the current line. That behavior interacts with whitespace handling and line wrapping rules; for example, the way a tab is preserved or causes wrapping depends on the surrounding whitespace policy as controlled by white-space. The visual width of a tab is also ultimately measured in terms of the current font metrics, so the effective on-screen spacing will vary with typography choices such as font-family and font-size, which can make a given tab-size look wider or narrower in different contexts.

Practical uses of tab-size include keeping columns aligned in code listings or plain-text tables, improving legibility of pasted logs, or matching the tab width expected by a codebase or editor without rewriting files. For accessibility and consistency, many projects prefer converting tabs to spaces at a canonical width before display, but when you must render raw tabs, adjusting tab-size lets you control visual alignment on the page. Keep in mind that changing tab rendering affects layout only — it does not modify the document text or how assistive technologies expose content, so it's a purely visual tuning mechanism.