In this article, we are going to learn how can we add spaces/tabs in text using HTML/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 our text.
These are the following approaches by using these we can add spaces/tabs in text:
Table of Content
Using the HTML Entities:
- The character entity is used to denote a non-breaking space which is a fixed space. This may be perceived as twice the space of a normal space. It is used to create a space in a line that cannot be broken by word wrap.
- The   character entity is used to denote an ‘en’ space which means half point size of the current font. This may be perceived as twice the space of a normal space.
- The   character entity is used to denote an ’em’ space which means equal to the point size of the current font. This may be perceived as four times the space of a normal space.
Syntax:
// Regular space
  // Two spaces gap
  // Four spaces gap
Example: In this example, we are going to see how to use spaces and please don’t forgot to add   &emsp in code where you need space between your text.
<!DOCTYPE html><html>
<head>
<title>
How to insert spaces/tabs in text using HTML/CSS?
</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to insert spaces/tabs in text using HTML/CSS?</b>
<p>This is a regular space.</p>
<p>This is a two spaces gap.</p>
<p>This is a four spaces gap.</p>
</body>
</html>
|
Output:
Using the tab-size property in CSS:
The tab-size CSS property is set the number of spaces 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">GeeksforGeeks</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:
Using Custom CSS:
A new class can be created which gives a certain amount of spacing by using the margin-left property. The amount of space could be given by the number of pixels specified in this property. The display property is also set to ‘inline-block’ so that no line-break is added after the element. This allows the space to sit next to text and other elements.
Syntax:
.tab {
display: inline-block;
margin-left: value; /* for e.g: value = 40px*/
}
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>
.tab {
display: inline-block;
margin-left: 40px;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to insert spaces/tabs in text using HTML/CSS?</b>
<p>This is a<span class="tab"></span>tab space in the document.</p>
</body>
</html>
|
Output: