Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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: 27-Dec-2023
456 Views
Advertisements