How to use tab-size Property in CSS In HTML
The tab-size property in CSS is used to set the number of spaces on each tab character will display. Changing this value allows inserting the needed amount of space on one tab character. This method however only works with pre-formatted text (using <pre> tags). The tab character can be inserted by holding the Alt and pressing 0 and 9 together.
Syntax
.tab { tab-size: value; /* for e.g: value = 2*/ }
Example: In this example, we are going to implement the above-explained method.
<!DOCTYPE html>
<html>
<head>
<title>
How to insert spaces/tabs in text using HTML/CSS?
</title>
<style>
.tab1 {
tab-size: 2;
}
.tab2 {
tab-size: 4;
}
.tab4 {
tab-size: 8;
}
</style>
</head>
<body>
<h1 style="color: green">w3wiki</h1>
<b>How to insert spaces/tabs in text using HTML/CSS?</b>
<pre class="tab1">This is a tab with 2 spaces.</pre>
<pre class="tab2">This is a tab with 4 spaces.</pre>
<pre class="tab4">This is a tab with 8 spaces.</pre>
</body>
</html>
Output:
How to insert spaces/tabs in text using HTML and CSS
In this article, we will learn how to add spaces/tabs in text using HTML and CSS. As we know HTML doesn’t support more than one space by default, that’s why we need some extra attributes or CSS to get extra space in between the text.
These are the following approaches by using these we can add spaces/tabs in text:
Table of Content
- Using the HTML Entities
- Using the tab-size property in CSS
- Using Custom CSS