CSS tab-size Property

February 10, 2021 12:37 pm IST

You are Here:

CSS tab-size Property

CSS tab-size property is used to customize the width of a tab (U+0009) character.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ tab-size: 4; -moz-tab-size: 4; /*Firefox*/ -o-tab-size: 4; /*Opera 10.6-12.1*/ } #point1{ tab-size: 16; -moz-tab-size: 16; /*Firefox*/ -o-tab-size: 16; /*Opera 10.6-12.1*/ } </style> </head> <body> <h1>CSS tab-size Property</h1> <h2>tab-size: 4</h2> <pre id="point"> tab-sizeis4. </pre> <h2>tab-size: 16</h2> <pre id="point1"> tab-sizeis16. </pre> </body> </html>

Run

Syntax

Using CSS

element{ tab-size: 16; }

Using Javascript

object.style.tabSize="16";

Animatable

No, tab-size property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS tab-size property is 8.

Property Value

The following table provides a list of values for CSS tab-size property.

Value	Explanation
Number	The number of space-characters to be displayed for each tab-character.
length	Allows you to define the border-image-width in any CSS length unit.

Using JavaScript

In the following example, we will demonstrate how to change the CSS tab-size property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> pre{ tab-size: 4; -moz-tab-size: 4; /*Firefox*/ -o-tab-size: 4; /*Opera 10.6-12.1*/ } </style> </head> <body> <h1>CSS tab-size Property</h1> <pre> This is pre tag. </pre> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("pre")[0]; function myFunction(){ x.style.tabSize = "16"; x.style.MozTabSize = "16"; x.style.OTabSize = "16"; } </script> </body> </html>

Run