How to Add Space in HTML

When any element is added to the HTML, by default, there is very little or no space between them. Spaces are mostly created manually by using different CSS properties. However, you can also create spaces in HTML using various keywords such as “&nbsp”, “&emsp;” and “<pre></pre>” tags.

In this article, we will learn how to add space in HTML using different methods, which are:

• using “&nbsp”
• using “&emsp;”
• using “<pre></pre>”

Let’s start with method one.

Method 1: How to Add Space in HTML Using “&nbsp”

The “&nbsp” tag in HTML can be used to provide space without writing any external CSS. It indicates a non-breaking space. The one-time &nbsp represents one space. In general, it is not preferable to give more space.

More specifically, you can also create space between the links using &nbsp. To do so, first, add links in the HTML.

Step 1: Add Links in HTML

In the HTML, inside the body tag, we will style the background using the background color “rgb(249, 252, 74)”. Next, add a heading with <h1> tag and two links with the <a> tag inside the <center> tag. Use hyperlink references to provide a hyperlink and provide the site’s address. Additionally, specify the link name since the link does not appear on the website without it.

HTML

You can see that the links are added, but they have minor space between them:

Step 2: Create Space Between Links in HTML

Now, we will create space between the added links by using the “&nbsp”. Here we will write three times “&nbsp”, which means we will add three spaces between the links:

Here is the result that demonstrates that the space is added between the links:

Method 2: How to Add Space Using “&emsp;”

The term “emsp” stands for emphasized space, which is used to create double space between the HTML elements. To do so, you will write “&emsp;” where you want to create space in the HTML. Here, “&” and “;” are included in the syntax.

Now, we will create a space using “&emsp” between the buttons. So, first, add buttons in HTML.

Step 1: Add Buttons in HTML

In the HTML, first, we will add a heading with <h1> and two buttons with <button> tag and set the button text as “Button 1” and “Button 2”:

The following image shows that the buttons are created:

Step 2: Create Space Between Buttons in HTML

Now, we will create space between buttons. To do so, we will write three times “&emsp;” to add three spaces between buttons:

In the below-provided image, you can see that the space is created:

Method 3: How to Add Space Using “<pre></pre>”

In HTML, the “<pre>” tag specifies preformatted text. The text within the “<pre>…….</pre>” tag is displayed in a fixed-width font. There is usually a “courier” font used to display it. Both the space and the line break are maintained by using this tag.

Now, we will create a space using the “<pre></pre>” tag between the text. So, first, add text in the HTML.

Step 1: Add Paragraph in HTML

Here, we will create a heading <h1> and paragraph using the <p> tag:

You can see that the paragraph is created:

 

Step 2: Create Space Between Paragraph Text in HTML

Next, add the “<pre>” tag after the “<p>” tag and “</pre>” after the word where you want to break the line:

Using the code above, the following output is obtained and you can see that the space is created:

 

That’s it! We have explained the method to add space in HTML.

Conclusion

To create space in the HTML “&nbsp”, “&emsp;”, and “<pre></pre>” keywords are used. &nbsp is for the single space, &emsp; is for the double space, and the <pre></pre> tag is for both space and line-break. In this manual, we learned the three different methods to create space in HTML and provided examples of each method.