How to create extra space in HTML or a web page

Updated: 12/31/2017 by Computer Hope
HTML

Creating extra space in your HTML on a web page can be achieved many ways depending on the type of space you want to create. The following sections contain many of the different ways to create extra space using both HTML and CSS.

Creating extra spaces before or after text

Non breaking space

One of the most confusing things to new users who are creating their own web page is that they cannot press the spacebar multiple times make additional spaces. To create extra spaces before, after, or in-between your text, use the   (non-breaking space) extended HTML character.

For example, with "extra    space" we have the following code in our HTML.

extra    space
Note

If you are using a WYSIWYG editor to enter the above code, you must be in the HTML tab or editing the HTML code.

Keep spacing in text that is pasted into a page

If you are pasting text with extra spaces or tabs, you can use the HTML <pre> tag to keep the text formatted. Below is an example of how to paste text with extra spaces using the <pre> tag.

This    text      has    lots of     spaces

The example above is done using the below HTML code.

<pre class="tab">This    text      has    lots of     spaces</pre>
Note

If you are using a WYSIWYG editor to enter the code above, you must be in the HTML tab or editing the HTML code.

Creating extra space around an element or object

Any HTML element can have additional spacing added to the top, right, bottom, or left. However, it is important that you understand the difference between margin and padding before deciding what type of space you want to add around the element or another object. As you can see in the picture below, padding is what immediately surrounds the element, within the border, and the margin outside the border.

Padding

In the example below, our paragraph is surrounded by a border, indented with a margin, and has space on the right and bottom of the paragraph.

An example of a paragraph with margin and padding.

The example above was created using the code below.

<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>

In the first section of the code, "margin-left: 2.5em;" adds a left margin of 2.5 em, which gives the appearance of indented text. As shown by the example, this spacing is outside of the border. In the next section, "padding: 0 7em 2em 0;" is defining the top, right, bottom, and left (clockwise) padding. There is "0" top padding, "7em" right padding, "2em" bottom padding, and 0 left padding. The remainder of this example is defining how the border should look.

Creating a tab using CSS and HTML

A tab can be created in HTML by adjusting the left margin of an element. For example, this paragraph has a left margin of 2.5 em from the element containing the text. The CSS to create this left margin is shown below.

.tab {
 margin-left: 2.5em
}

After placing this code in our CSS file, we can apply the "tab" class to any text to create the appearance of a tab. The value of the margin-left can be increased or decreased depending on your needs.

Although we recommend the method above, the margin-left CSS can also be added inline as shown in the example below.

<p style="margin-left:2.5em">An example of a 5em left margin.</p>

An example of a 5em left margin.

Add space below a line or paragraph of text

If you need to add extra space below a line or paragraph of text, and only need to do it once, you can use the <br> tag to add extra space in a document. Below is an example of how this technique can be applied.

<p>This sentence contains  example text.<br>
<br>
As you can see, two breaks were added to create the  space above.</p>

The code above would create the text shown below.

This sentence contains example text.

As you can see, two breaks were added to create the space above.

Additional breaks can be added if needed. However, we suggest using the CSS method mentioned earlier to add padding and spacing around your text if being done in multiple places on a page.

Additional information