Setting Tab Sizes in HTML with CSS tab-size Property

CSS tab-size property allows us to set the amount of whitespace used in tabs. The width of the tab character can be customized easily. The value set for the tab size is in spaces. Let us see the syntax.

Syntax

 tab-size: value;

The value above is the number value set for tab space.

The following examples illustrate the CSS tab-size property.

Example

Here, we have set the tab size to 32 using the tab-size property −

tab-size: 32;

The tab size for the firefox is also set −

-moz-tab-size: 32;

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         display: flex;
         flex-direction: column;
      }
      p {
         white-space: pre;
      }
      p:last-of-type {
         tab-size: 32;
         -moz-tab-size: 32;
      }
   </style>
</head>
<body>
   <p>Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
   <p>Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
</body>
</html>

Example

Here, we have set the tab size to 1 using the tab-size property −

tab-size: 1;

The tab size for the firefox is also set −

-moz-tab-size: 1;

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      pre {
         margin: 2%;
         box-shadow: inset 0 0 12px lime;
      }
      p {
         background: lavender;
         tab-size: 1;
         -moz-tab-size: 1;
      }
   </style>
</head>
<body>
   <pre>
      4 tabs of size 1 paragraph
      .|.|.|.
      <p>
         Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.
      </p>
   </pre>
</body>
</html>
Updated on: 2023-12-27T16:19:55+05:30

598 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements