How to Add Spaces Between Text in HTML
-
Use the
<pre>Tag to Insert Spaces in the Text in HTML -
Use
to Insert Spaces in the Text in HTML -
Use the CSS
paddingProperty to Insert Spaces in the Text in HTML
This article will discuss a few methods to insert spaces and tabs in the text in HTML. HTML generally doesn’t allow more than one whitespace at a time. These methods help to add more than one whitespace.
Use the <pre> Tag to Insert Spaces in the Text in HTML
The <pre> tag defines a preformatted text. It presents the text exactly as it is written in the HTML code. The blank space inside this tag is displayed as written. It is supported in almost all web browsers. We can use the <pre> tag to insert spaces in the text using HTML. The <pre> tag supports almost all the global attributes in the HTML.
For example, inside the HTML body, open the <pre> tag at first. Inside this tag, type the text of your choice. Now, typically add some random blank spaces in between the words of your sentence in the text (I'm learning HTML used in the example below) . After you’ve completed your desired text, close the <pre> tag. Also, don’t forget to close all the previously opened tags.
The example below illustrates a method to add bank spaces in the text in HTML. After the <pre> tag is opened, it specifies a preformatted text. The I'm learning HTML text is written inside the <pre> tag. As we can see, five white spaces are used in-between the words learning and HTML. The output also displays five blank spaces between the two words, just like it was written. We can put as much space as we want. In this way, we can add blank spaces in the text in HTML.
Example Code:
<pre> I'm learning HTML</pre>
Use to Insert Spaces in the Text in HTML
We can use the tag to add a blank space in the text in an HTML code. The entity NBSP stands for non-breaking space. A non-breaking space interprets that it is a space that will not break into a new line. Two words separated by non-breaking space will be on the same line rather than in different lines. It is advantageous to halt browsers from truncating spaces in HTML pages.
For example, inside the HTML body, type the text of your choice. In the place where you want to add the blank space, type . You have to type the same number of as the blank space you want. Write five instances of and continue typing the rest of the text. After the completion of it, close all the previously opened tags.
The example below illustrates another method to add blank spaces in your text in an HTML code. After the word learning, the entity is ordered five times subsequently. It implies that there are five white spaces between the words learning and HTML. If you type 5 spaces in your text in the code, the browser will remove four blank spaces, but   helps add as many spaces as you want. So, this is another way how you can add blank spaces in an HTML code.
Example code:
<body>
I'm learning HTML
</body>
Use the CSS padding Property to Insert Spaces in the Text in HTML
We can also use the CSS padding property to add blank spaces in the text in HTML. We can use the padding property with the <span> tag to achieve the blank space. The <span> tag is called an in-line container as it does not start in a new line. It is used to markup a text or a document. It doesn’t inherently represent anything because it does not make any visual change alone. It is used for styling purposes, also is supported in all web browsers. It also supports all the Global and Event attributes in HTML. We can use the padding-left property in a <span> element to add spaces.
For example, inside the HTML body, type the text of your desire. Where you want to add the blank space, create a <span> element and apply the style in it. Set the padding-left property to 30px. After it, close the <span> tag. Write the remaining text and close all the previously opened tags in the code.
We have created a <span> element after the word learning in the example below. We applied the left padding of 30px in the element. It means we created a space of 30px after the word learning, and then the rest of the word continued. Thus, we added spaces in the text using CSS and HTML.
Example Code:
<body>
I'm learning <span style="padding-left:30px;"></span>HTML
</body>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn