🎯 CSS tab-size Property (How Tab Width Works in CSS)

The tab-size property in CSS defines how wide a tab character appears inside an HTML element.

It controls how many spaces a tab represents when using preformatted text or code blocks.

This property is especially useful for improving code readability and maintaining consistent indentation in <pre> elements.

The tab-size property is mainly used in code blocks and preformatted text.

It helps developers control indentation width for better readability and structure.

pre {
  tab-size: 4;
}
                

➡️ In this example, each tab character is displayed as the width of 4 spaces.

Defines how many spaces a tab character represents.

Sets tab width using units like px, em, or rem.

pre {
  tab-size: 20px;
}
                

➡️ This makes indentation visually wider using fixed pixel spacing.

Resets the property to default value (usually 8 spaces).

The element inherits the tab-size value from its parent.

if (true) {
  console.log("Hi");
}
                

if (true) {
        console.log("Hi");
}