Space plays a significant role in narrative writing. You can also utilize spacing or other punctuation to suggest the passage of time. Moreover, in expository writing, a shift in tone or point of view can highlight the significance of things in a sequence by arranging them vertically. Therefore, sometimes, there can be a need to add vertical space between different elements. For that purpose, the “<br>”, “<pre>”, and “margin-bottom” tags can be used.

This post will demonstrate the method for inserting the vertical blank spaces into an HTML document.

Can I Insert Vertical Blank Space Into an HTML Document?

Yes, you can insert the blank space vertically into an HTML page/document by using different methods. Some of them are listed below:

• Method 1: Insert Vertical Blank Space Into an HTML Document Using “<br>” Tag
• Method 2: Insert Vertical Blank Space Into an HTML Document Using “margin-bottom” Property
• Method 3: Insert Vertical Blank Space Into an HTML Document Using “<pre>” tag

Method 1: Insert Vertical Blank Space Into an HTML Document “<br>” Tag

To add the vertical blank space, using the “<br>” tag, check out the below-given instructions.

Step 1: Add a div Container

Initially, add a “div” container with the help of the “<div>” element. Furthermore, specify an “id” attribute inside the div opening tag and assign a unique id for identification purposes.

Step 2: Add <br> tag

Next, utilize the “<br>” tag to add vertical space between the text.

Step 3: Embed Text

After that, embed text in the div container and add the “<br>” tag again to insert more space after the text:

As a result, the vertical blank space is added successfully:

Step 4: Style Text

To style the text added in the div container, access the div with the help of id name as “#v-space” and apply the following CSS properties:

In the above code snippet:

• “display” property determines the display behavior of the element.
• “text-align” is utilized for setting the alignment of the text.
• “color” allocates the color to the element’s text.
• “font-family” determines a particular style to the text added in the defined element.

Output

Method 2: Insert Vertical Blank Space Into an HTML Document Using the “margin-bottom” Property

You can also apply the “margin-bottom” property to add the vertical blank space in the HTML document. For that purpose, follow the given instructions.

Step 1: Add <p> tag

Utilize the “<p>” tag in HTML to add the text in the paragraph. Also, add an “id” or “class” attribute

Step 2: Insert Data

Next, embed text in between the paragraph text:

Output

Note: The <p> tag also adds paragraph space inside the document.

Step 3: Insert Vertical Blank Space

Access the paragraph by utilizing the id “#vertical-space” and apply the below-listed code block properties:

Here:

• “margin-bottom” determines the bottom margin of an element.
• “color” is set as “blue” and “font-style” as “italic”.

Output

Method 3: Insert Vertical Blank Space Into an HTML Document Using the “<pre>” Tag

To insert the vertical blank space, the “<pre>” tag is also utilized. To do so, follow up on the given instructions.

Step 1: Make a “div” Container

For making a div container, utilize the “<div>” tag and add an id attribute with a particular name.

Step 2: Add Heading

Next, insert a heading with the help of an HTML heading tag between “<h1>” to “<h6>”. To do so, we have utilized the “<h2>” tag.

Step 3: Insert Vertical Space

After that, insert “<pre>” tag and embed tag inside the “<pre>” opening and closing tag:

Output

That’s all about inserting blank spaces vertically into an HTML document.

Conclusion

To insert a vertical blank space into an HTML document, there are multiple methods that can be used, including “<br>”, “<pre>” tag, and “margin-bottom”. To utilize the “<br>” tag for inserting vertical spaces, add the text and then insert “<br>”. This post has demonstrated the different methods for inserting the vertical blank space into an HTML document.