How to insert spaces/tabs in text using HTML/CSS

What is HTML?

HTML or HyperText Markup Language is used to design web pages. It was released in 1993. The file extension name for HTML file is “.html”. An HTML file is created with the help of CSS and JavaScript. HTML describes the webpage's structure, basically how the page is created or the skeleton body of the webpage. The codes are written in the form of an element. These elements are also called HTML tags. The tags use the markups of HTML. The golden rule of HTML is all the major tags must be opened with <tags> and closed with </tags>. When we have multiple tags, each tag must be closed in the sequences. 

What is CSS?

CSS or Cascading Style Sheet is a language used to design the webpage that HTML creates. It is the core language of web designing. 

As web designers, we must learn how to insert tabs and spaces for a better appearance of a web page. It also improves the readability of our HTML code. For adding multiple spaces, we cannot use the spacebar numerous times. We use various spaces in the HTML code to break the code into different lines. Spaces in the code also design the code in a better way, and it also improves the readability of the code. If there are multiple spaces in our code, the browser deletes extra spaces and allows only one space in the code. But it is not true that we cannot add multiple spaces and tabs in the code. 

There are some approaches for adding some spaces in HTML and CSS.

These approaches are as follows:

Approach-1

By using unique and designated characters, we have to use these tags if we want to add more than one space in the code or the webpage. These tags also represent the non-breaking space. 

There are three special and designated characters for using spaces in the HTML and CSS code.

• The &nbsp- For non-breaking spaces, this unique character is used in the entire code. It may generate twice the common space. The spaces generated by this unique character cannot be broken by code wrapping. 
• The &ensp- This unique character is used entirely to denote the current fonts' half-point size, also called en spaces.
• The &emsp- This unique character is used entirely to denote the current fonts' total size, also called em spaces. It may generate four times the common space.

Syntax

for regular space - &nbsp.
For two space gaps - &ensp.
For four space gaps- &emsp.

HTML code

<!DOCTYPE html>
<html>
<head>
<title>
How to insert spaces/tabs in text using HTML/CSS?
</title>
</head>
<body>
<h1 style="color: green">javaTpoint</h1>
<b>How to insert spaces/tabs in text using HTML or CSS?</b>
<p>This is a &nbsp; for regular space.</p>
<p>This is a &ensp; for two spaces gap.</p>
<p>This is a &emsp; for four spaces gap.</p>
</body>
</html>

Output

Approach-2

Using TAB size property: This property is used to set tab size space in HTML code. Changing the value of the tab character is also possible in the code. This method only works in <pre> tags.

Syntax

.tab {
        tab-size: 2;
    }

HTML code

<!DOCTYPE html>
<html>
<head>
<title>
How to insert spaces/tabs in text using HTML or CSS?
</title>
<style>
.tab5 {
tab-size: 5;
}


.tab6 {
tab-size: 8;
}


.tab7 {
tab-size: 10;
}
</style>
</head>
<body>
<h1 style="color: green">javaTpoint</h1>
<b>How to insert spaces or tabs in text using HTML or CSS?</b>
<pre class="tab5">This is a tab which show 5 spaces.</pre>
<pre class="tab6">This is a tab which show 8 spaces.</pre>
<pre class="tab7">This is a tab which show 10 spaces.</pre>
</body>
</html>

Output

Approach-3

By creating a new class for spacing through CSS: By using the margin-left property, a new class can give a certain amount of spaces. We can assign the number of spaces by providing the number of pixels in the property. It also allows the spaces next allow to the line.

Syntax

.tab {
    display: inline-block;
    margin-left: 40px;
}

HTML code

<!DOCTYPE html>
<html>
<head>
<title>
How to insert spaces or tabs in text using HTML or CSS?
</title>
<style>
.tab {
display: inline-block;
margin-left: 40px;
}
</style>
</head>
<body>
<h1 style="color: green">javaTpoint</h1>
<b>How to insert spaces or tabs in text using HTML or CSS?</b>
<p>This is a<span class="tab"></span>tab space in the above document.</p>
</body>
</html>

Output

Approach-4

By adding a line break in HTML: We can add a line break by using the tag <br> in the HTML code. With the help of this tag, we can create a new line.

HTML code

<!DOCTYPE html>
<html>
<body>
  <p>this is my first line.
  <br>this is second line.
  </p>
</body>
</html>

Output