Paragraphs & wrapping
tab-size
tab-size sets the width of one tab character. A number means that many spaces; a length sets the width directly. It is often used to set the indent width when showing code.
Syntax
<number [0,∞]> | <length [0,∞]>Preview
if (ok) {
for (x of xs) {
log(x)
}
}
Presets
Drag the bottom-right corner to resize
Code
.box {
white-space: pre;
font-family: monospace;
tab-size: 4;
}Controls
tab-size4
if (ok) {
for (x of xs) {
log(x)
}
}
About
Writing the value
- A number such as
4: the width of that many spaces (U+0020). The initial value is8. - A length such as
2em: uses that width.
Only when tabs are kept
Tabs are normally collapsed into a single space like other white space, so tab-size does nothing. It works when tabs are kept with white-space: pre or pre-wrap, or inside <pre>. The preview on this page writes white-space: pre and shows tab-indented code. A number is measured in space widths, so the preview uses a monospace font (font-family: monospace) where every character has the same width, making the count easy to see.
A tab moves to the next tab stop, so a tab in the middle of a line can come out narrower than the width you set.