Did you know that you can include HTML space directly in your .html document, without having to use CSS?
Currently, CSS3 allows you to insert several styles. Therefore, you can control the spacing between any HTML elements.
However, often, to save time, we can use blanks spaces by the HTML itself. Imagine an example where you just want to include a space between lines. If you were to use CSS, you could spend some time doing this styling. Therefore, you can do this with just a line-breaking HTML tag.
Most developers may also find it difficult to include greater spacing in some parts of the text, especially when they want to exemplify code. That way, with HTML space techniques, you can do this quickly using just one entity.
Therefore, in this article, you can read the following topics:
- Space with the HTML tag <p>
- The non-breaking space entity
- Space with an HTML tag <br/>: line break
- The <pre> tag
- The HTML space in practice
- How to generate space between lines with CSS?
Space with the HTML tag <p>
The <p> tag allows the insertion of paragraphs in HTML content. By default, HTML paragraphs are separated by a space between them. Therefore, even if you write everything on the same line of code, if there is more than one <p> tag, it will result in spacing between paragraphs. That is: when closing the tag with </p>, HTML generates a line break. The <p> tag brings with it the standard characteristics of the upper and lower margin in the value of 1em, which generates a greater space between this tag and any other element. This is one of the basic HTML space techniques. Let’s see the example below:
<p>my line of code</p><p>my second paragraph</p>
The end result will be:
my line of code
my second paragraph
Therefore, just with the simple correct use of the tag, you will be able to format the spacing of your content in HTML well.
The non-breaking space entity
Let’s say that inside an element you want to include a space equivalent to pressing the space key 4 times. It would then be necessary to include four spaces between the elements, correct?
Wrong. In HTML, you can include multiple spaces between one word and another, but the document will only be rendered as if there were only a single blank space between those words. Let’s see the example below:
<p>Copa Host.</p>
The end result will be:
Copa Host.
So how to solve this problem in HTML? What should I do if I want to include more than one blank space between words?
The best way to resolve this is to use entities. HTML allows you to use entities that represent symbols or keys. Among these, there is the non-breaking space entity: . Therefore, you can add one or more blanks between words just by adding the entity between them. Try to redo the previous code, only this time you can use the entity referring to white space four times:
<p>Copa Host.</p>
With that, you can see the result as below:
Copa Host.
In a search on HTML Entities, you may notice that there are other formats that have the same function and represent the same entity.
There are also two pre-established entities that add two or four spaces:   and  . Let’s see the example below:
<p>Copa Host.</p> <p>Copa Host.</p>
The result of this will be:
Copa Host.
Copa Host.
Therefore, this technique greatly facilitates the work of the developer, even allowing the use of tab rules, which are very important for writing codes.
We can see other HTML entities through the official W3C documentation.
Space with an HTML tag <br/>: line break
Previously, we saw that a line break is performed between paragraphs.
But, how can we add one or more lines to this break? To do this, just use the tag <br/> which means break. With that, we can include as many line breaks as we want between paragraphs or words.
Therefore, this method is widely used to generate a space directly in the HTML code without having to stylize it in the CSS.
You can break lines between any element, not just paragraphs, such as <span>. Another important feature of the break tag is that it has no margin characteristics. Therefore, it acts differently from the <p> tag’s line break. That is, with it, you can use a different way to format your content.
Let’s look at the following example:
<p>How to insert a<br/>line break</p>
That way, you get the following result:
How to insert a
line break
As explained earlier, we can apply as many breaks as we want. Therefore, we can create a larger spacing. Let’s see the example below:
<p>Let's insert a<br/><br/><br/>three line break.</p>
With this example, we can reach the following result:
Let’s insert a
The <pre> tag
Through the HTML <pre> </pre> tag, we can include text that will have the original formatting. That is, it will assume all the characters typed. With that, all spaces entered in the element will be included in the rendering. In addition, the <pre> tag carries an upper and lower margin value of 1em, as well as the <p> tag. Let’s look at the following example:
<pre>My Text. Hello World.</pre>
With that, we can see the result:
My Text. Hello World.
Therefore, we can use the <pre> tag to facilitate it especially when we want to use tabs, for example: when writing codes.
The HTML space in practice
As we saw in this article, there are several ways to use spacing techniques using the HTML code itself. That way, as a developer, you can implement several solutions that through CSS could take much longer. However, we recommend that you use it with some moderation, and for really necessary situations, as this implies a larger number of bits in your code. That is, it would result in a longer rendering time. Therefore, depending on the need, it is more worth styling an element with CSS than using line breaks several times.
We also recommend that you create an HTML document and use the techniques explained above to practice!
How to generate space between lines with CSS?
Finally, it is worth understanding the line-height property, a CSS property that modifies the default HTML space without having to change the margin, padding or border properties. That is: this property is capable of changing the spacing between lines. With this, we can use pre-established values, values in units of measure (such as px, em, and others), percentage or a numerical value. See in the following example, different ways to use the line-height property.
div.a {
line-height: normal;
}
div.b {
line-height: 1.6;
}
div.c {
line-height: 80%;
}
div.d {
line-height: 20px;
}In addition, you can also access the official W3C documentation to learn other features of this property.
