Inserting Extra Space in HTML Web Page

Article By Digamber Rawat Published on

Add Space in HTML

Today we are going to talk about HTML Space; space referred to the position at a distance from one another. We’ll learn in this tutorial how to add space in HTML. When it comes adding space in HTML web page, there are multiple methods available through which we can add space in HTML.

DigitalOcean Affiliate

We are about to take help of HTML and CSS to include the spaceS in HTML.

Working with HTML Space

Let’s check out what are the best and easy ways to add the space in HTML web page.

Adding Spaces In HTML Text

I remember when I was just getting started as a HTML developer, I used to find adding a space in HTML web page very difficult. Pressing the spacebar again and again to add the space was tuff. Later on, I was recommended by my fellow developers that I can use $nbsp; (non-breaking space) tag to prolonged the HTML character.

In the given below example, you can check how to insert space in HTML5 page by just using non-breaking space.

For example, to insert this much space in HTML5, we need the following code “Add Space”.

Add $nbsp;$nbsp; Space

Using <pre> Tag for Preformatted text

We are going to explore about <pre> HTML tag, and you must be thinking about what it does? Well, this HTML tag helps in pasting the text as it is, it keeps the extra space in the text as it is. In the given below example, we’ll learn how to paste the text with extra space and tabs.

<pre>Position    at     a  distance   from    one another.</pre>

<pre> Output

Position    at     a  distance   from    one another

Make Extra Space Around HTML Elements

Adding extra space around HTML elements (left, right, top & bottom) can also be achieved by using margin and padding. In order to put space around HTML elements, we need to check out the margin, padding, and border diagram below.

Space in HTML

Now let us check out the following example, our text includes margin and border it seems like a box.

<p style="border: 3px solid #cccccc; margin-left: 2.6em; padding: 0 8em 3em 0;">
    Lorem ipsum dolor sit amet, consectetur adipiscing.
</p>

Output:

Space Around HTML Elements

Using <br> Tag to Create Space in Text or Line

Inserting an extra space beneath text or line is pretty easy, it can be achieved using <br> HTML tag. This tag can break any text and create extra space, check out the examples below.

<p>
Check out the br tag example below.
<br>
<br>
<br>
We've used 3 breaks to add space in the text.
</p>

BR tag Output:

Check out the br tag example below.

We’ve used 3 breaks to add space in the text.

You can add as many breaks as you want on a web page. However, this is not considered a good practice. Adding break with CSS is recommended to use padding and margin to achieve this task.

Digamber Rawat
Digamber Rawat

I am a software engineer from India, love to learn and write about latest web and mobile technologies like: MongoDB, Angular 2+, Firebase, Express JS, Python, Node JS, JavaScript, RxJS etc.