Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Setting Tab Sizes in HTML with CSS tab-size Property
The CSS tab-size property allows you to control the width of tab characters in your HTML content. This property is particularly useful when displaying preformatted text or code where tab spacing is important for readability and alignment.
Syntax
selector {
tab-size: value;
}
Possible Values
| Value | Description |
|---|---|
number |
Sets the tab size as a number of space characters (default is 8) |
length |
Sets the tab size using length units (px, em, rem, etc.) |
Example 1: Large Tab Size
The following example demonstrates setting a large tab size of 32 spaces −
<!DOCTYPE html>
<html>
<head>
<style>
.normal-tabs {
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
.large-tabs {
white-space: pre;
background-color: #e6f3ff;
padding: 10px;
border: 1px solid #ccc;
tab-size: 32;
-moz-tab-size: 32; /* Firefox support */
}
</style>
</head>
<body>
<div class="normal-tabs">Default tab size: Text after tab</div>
<div class="large-tabs">Large tab size (32): Text after tab</div>
</body>
</html>
Two text boxes appear. The first shows normal tab spacing, while the second shows much wider spacing between "Large tab size (32):" and "Text after tab" due to the 32-space tab width.
Example 2: Small Tab Size
This example shows how to set a minimal tab size of 1 space −
<!DOCTYPE html>
<html>
<head>
<style>
.code-display {
white-space: pre;
font-family: monospace;
background-color: #f5f5f5;
padding: 15px;
border-left: 4px solid #007acc;
tab-size: 1;
-moz-tab-size: 1;
}
.comparison {
white-space: pre;
font-family: monospace;
background-color: #fff5f5;
padding: 15px;
border-left: 4px solid #dc3545;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="code-display">Tab size 1: function() {
return "minimal spacing";
}</div>
<div class="comparison">Default tabs: function() {
return "normal spacing";
}</div>
</body>
</html>
Two code blocks appear. The first block with tab-size: 1 shows very compact indentation, while the second block shows normal tab spacing with wider indentation.
Browser Support
The tab-size property is supported in modern browsers. Use the -moz-tab-size prefix for older Firefox versions to ensure compatibility.
Conclusion
The tab-size property provides precise control over tab character width in preformatted text. It's essential for displaying code snippets and maintaining consistent indentation across different content areas.
Updated on: 2026-03-15T15:29:10+05:30
723 Views
Advertisements