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
Selected Reading
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
707 Views
Advertisements