CSS tab-size Property

The tab-size property in CSS is used to specify the width of the tab character. The tab-size usually displays a single space character in an HTML document. Some elements like <textarea> and <pre> elements display the tab-size.

Syntax:

tab-size: number|length|initial|inherit;

Property Value: The value of tab-size property is listed below:

number: It is used to set the number of space characters in a tab. Its default value is 8.
length: It is used to set the length character. But it is not supported by most of the browsers.
initial: This property is used to set its default value.
inherit: It is used to inherit the property from its parent.

Example: In this example, we are using the above-explained properties.

html

<!DOCTYPE html>
<html>
<head>
    <title>tab-size Property</title>
    <style>
        /* CSS property for tab-size */
        #geeks {

            /* Used for Firefox support */
            -moz-tab-size: 6;

            /* Used for Opera 10.6-12.1 support */
            -o-tab-size: 6;
            tab-size: 6;
        }

        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body style="text-align:center">

    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <h2>
        The tab-size Property
    </h2>

    <!-- tab-size property used here -->
    <pre id="Geeks1">
         GeeksforGeeks: A computer science portal
   </pre>
</body>
</html>

Output:

Supported Browsers: The browser supported by tab-size property are listed below:

Google Chrome 21.0
Edge 79.0
Firefox 91.0
Opera 15.0
Safari 7.0

Explore