How to Insert Vertical Space in HTML
-
Insert Vertical Space Using the HTML
<br>Tag - Insert Vertical Space Using CSS Properties
-
Insert Vertical Space Using the CSS
.spacerClass -
Insert Vertical Space Using the HTML
<hr>Tag -
Insert Vertical Space Using the HTML
<pre>Tag - Conclusion
This article will discuss how we can add or insert vertical spacing between the elements of an HTML document.
Unlike a simple document, you cannot add vertical spacing by entering multiple carriage returns. HTML will collapse all such spacings into one line space.
Different methods in CSS and HTML can be used to add vertical spacing in HTML documents. In this article, we will discuss all of them.
Insert Vertical Space Using the HTML <br> Tag
Using plain HTML, a straightforward way to add vertical spacing between the elements is to add a <br> tag. However, this method is not recommended when you need spacing in regular intervals.
<br> does not need any ending tag. This tag is mainly used when you need a line break to understand the content, but a new paragraph is necessary at that point.
For example, when we need to write the address of any place on our website:
<p>HubSot, Inc.<br>35 St. 2<br>California, USA </p>
The <br> tag is recommended when you need a single line spacing, not more than that. For this, you must use CSS to apply the style.
Insert Vertical Space Using CSS Properties
Cascading Style Sheets (CSS) can be used to place spaces that relate more to the styling of your page than the content. Instead of changing every instance of a styling rule in your HTML, CSS allows you to apply and modify site- and page-wide styling rules with just one or two minor rule changes.
Take note that you need to make sure you’re adding CSS externally.
We can set the margins and padding for any HTML element to add spacing around it. To understand what’s the difference between padding and margins, look at the image below:
In the image, we can see a border surrounding any HTML element (represented by content).
The space between the element and the border is the padding. And the spacing after the border is the margin.
If we need to add spacing between different HTML elements, we must set the margins of that HTML element.
Here are a few practical ways to add spacing between your content using CSS.
Use the CSS margin-bottom Property to Insert Vertical Space
The CSS margin-bottom property adds a space after the current element is finished, so there is a space between this element and the next element.
Consider an example in which we have multiple paragraphs and need to add a space after every paragraph. The HTML code of this scenario is as follows:
<!DOCTYPE html>
<html>
<body>
<p class="spaced-para">
This is my first paragraph
</p>
<!-- This is the place where i need to add 3 cm of space -->
<p class="spaced-para">
This is second paragraph
</p>
<!-- This is the place where i need to add 3 cm of space -->
</body>
</html>
For this, we will add a CSS style:
.spaced-para {
margin-bottom: 3cm;
}
Use the CSS padding-bottom Property to Insert Vertical Space
The same results can be obtained by setting the padding-bottom property of the paragraphs. Padding will add space within the element border.
.spaced-para {
padding-bottom: 3cm;
}
<!DOCTYPE html>
<html>
<body>
<p class="spaced-para">
This is my first paragraph
</p>
<!-- This is the place where i need to add 3 cm of space -->
<p class="spaced-para">
This is second paragraph
</p>
<!-- This is the place where i need to add 3 cm of space -->
</body>
</html>
Thus, we can see multiple methods to add spacing between HTML elements. All you need is to play around with different CSS properties and adjust the required design of your webpage.
Insert Vertical Space Using the CSS .spacer Class
Another effective and widely employed method for seamlessly introducing vertical space in HTML is by using the CSS .spacer class. This class is crucial for managing the vertical spacing within an HTML document.
By adjusting the margin-bottom property, this class allows developers to control how much space appears below HTML elements. This not only maintains a consistent design but also makes it easy to adjust spacing by modifying the CSS class.
In simple terms, the CSS .spacer class is a valuable tool for web developers, ensuring clean and visually appealing HTML documents.
Example:
.spacer {
margin-bottom: 20px;
}
This CSS code defines a class called .spacer. The class is designed to add space below elements that use it.
The specific instruction margin-bottom: 20px; means that a bottom margin of 20 pixels will be added, creating a gap under any element with the .spacer class.
<p class="spacer">This paragraph has the .spacer class, adding vertical space below.</p>
<p>This is the paragraph after the added vertical space.</p>
In the HTML part, the first paragraph uses the .spacer class, which we defined in the CSS. This means it will have a 20 pixel space below it due to the specified margin.
The second paragraph doesn’t have the .spacer class, so it appears right after the first paragraph without any extra space. Thus, we successfully added a vertical space between the two paragraphs inside the HTML document.
Output:
This paragraph has the .spacer class, adding vertical space below.
This is the paragraph after the added vertical space.
Insert Vertical Space Using the HTML <hr> Tag
The <hr> tag in HTML, which stands for “horizontal rule”, is primarily used to create a thematic break or a horizontal line within a document.
Traditionally, <hr> has been employed to visually separate sections of content. However, it can also be strategically used to create vertical spacing between elements, contributing to a well-organized and visually appealing layout.
Example:
<p>This is the first paragraph</p>
<hr>
<p>This is the second paragraph</p>
Output:
This is the first paragraph
--------------------------
This is the second paragraph
The provided example code consists of three elements: two paragraphs (<p>) and a horizontal rule (<hr>).
The HTML code creates a simple structure with two paragraphs separated by a horizontal rule. Visually, this results in a clear break between the two paragraphs, enhancing readability and providing a visual distinction between content sections.
Insert Vertical Space Using the HTML <pre> Tag
While the primary purpose of <pre> is not specifically to create vertical space, it does add space between lines due to its preformatted nature.
The <pre> tag in HTML stands for “preformatted text”. It is used to define text that should be presented in a fixed-width (monospace) font, and it preserves both spaces and line breaks within the content.
The primary purpose of the <pre> tag is to display text in a way that maintains the formatting as it appears in the HTML source code.
Example 1:
<pre>
This is some
preformatted
text with
vertical spacing.
</pre>
Output:
This is some
preformatted
text with
vertical spacing.
One of the key features of the <pre> tag is that it preserves whitespace, including multiple spaces and line breaks. This makes it useful for displaying code snippets or any text where the exact spacing is crucial.
In this example, the line breaks and indentation are maintained as specified within the <pre> tag.
Example 2:
<p>This is a regular paragraph.</p>
<pre>
This is some preformatted text.
It creates vertical space around it.
</pre>
<p>This is another regular paragraph.</p>
Output:
This is a regular paragraph.
This is some preformatted text.
It creates vertical space around it.
This is another regular paragraph.
The <pre> tag inherently adds some vertical space around its content due to the nature of preserving line breaks. This can be useful for creating intentional vertical spacing in a document.
The content within the <pre> tag introduces vertical space both above and below it, contributing to a clear separation between paragraphs.
The <pre> tag provides a straightforward way to present code or other text content without any automatic formatting or adjustments. It is particularly useful in scenarios where maintaining the original formatting is critical.
However, if you’re looking for a specific amount of vertical space, you might want to combine it with other techniques like CSS margins or padding.
Conclusion
To sum it up, this guide explored different ways to add space between elements in HTML. We started with the simple <br> tag for basic line breaks but quickly found it limited.
CSS came to the rescue, offering better control with properties like margin-bottom and padding-bottom. The article introduced a handy .spacer class for consistent spacing.
We also learned how to use HTML tags creatively, like <hr> for visual breaks and <pre> for maintaining text formatting and introducing space. In a nutshell, whether you prefer classic HTML, modern CSS, or inventive tag usage, you now have a variety of tools to tailor vertical spacing in your HTML documents.