How to add space in HTML?

If you are reading this article then I am pretty sure that you might have been struggling with your add space in HTML not being rendered on your browser screen. Even I struggled with the same issue when I first started exploring HTML. This article covers different ways to add space in HTML.

Ways to Add Space in HTML

If you had asked me this same question about How to add space in HTML when I started exploring HTML my simple answer would just keep pressing the spacebar key and that’s it! But unfortunately, this is not how HTML counts the spaces. There is a bit more than this. If you add multiple spaces in HTML then the browser removes the multiple spaces and just adds a single space instead of multiple spaces.

This way of collapsing multiple HTML spaces into one is known as whitespace collapse.

But many a time we need to insert multiple spaces so in this article I have listed some of the raw HTML ways to add space in HTML (with CSS as well).

Extended HTML Characters

Using certain extended HTML characters is the best way to add one or more than one spaces before, after, or in between the text in HTML.

Note: Extended HTML characters are case-sensitive.

Non-breaking space (  entity) is used to add multiple non-breaking spaces in HTML. A single non-breaking extended character [&npsp; (entity name) /   (entity number)] adds a single space. We can use as many non-breaking space entities as we need but should avoid using them as spacing & layout should be preferred to handle with CSS only. The browser renders each non-breaking space entity as a separate space. Adding multiple   results in multiple spaces.
The En space (&ensp; entity) adds two times the normal space. This entity denotes the en space that is equal to the half-point size of the current font. This is called “en” space because it is equal to the width of the alphabet “N” of the typeface that you are using.
The Em space (&emsp; entity) adds four times the normal space. This entity denotes the em space that is equal to the point size of the current font. This is called “em” space because it is equal to the width of the alphabet “M” of the typeface that you are using.
The Thin space (  entity) is the thinnest space entity in HTML.

Note: The &ensp; and &emsp; entities are used to add more than one space by a single use.

Code Demonstration:

<!DOCTYPE html>
<html>
<head>
     <title>Codedamn</title>
</head>
<body>
     <!-- thin space -->
     <p>Explore&thinsp;Codedamn</p>
     <!-- regular space -->
     <p>Explore Codedamn</p>
     <!-- non breaking space -->
     <p>Explore&nbsp;Codedamn</p>
     <!-- two spaces -->
     <p>Explore&ensp;Codedamn</p>
     <!-- four spaces -->
     <p>Explore&emsp;Codedamn</p>  
</body>
</html>
Code language: HTML, XML (xml)

Code Output:

From the code output image above we can see that   entity is the thinnest space, the regular space and the   entity results in equal spaces and the &ensp; and &emsp; entities add two times and four times the normal spaces respectively.

Takeaway:
&thinsp adds Thinnest Space
  adds Regular Space
&ensp; adds Two Spaces
&emsp; adds Four Spaces

HTML Preformatted Text (

) Tag

As the name implies the preformatted text (<pre>) tag in HTML is used to write preformatted text i.e. it is used to display the text as it is written in the HTML file/document including all the extra spaces and line breaks. The <pre> tag in HTML preserves all the extra spaces and line breaks when the text is rendered by the browser, unlike any other HTML tag.

The <pre> tag is a block-level HTML element and is used to prevent the collapsing of more than one HTML space. The font family of the text written inside the <pre> tag is automatically changed into a monospaced font (usually Courier) but can be easily changed using the CSS font-family property.

Code Demonstration:

<!DOCTYPE html>
<html>
<head>
     <title>Codedamn</title>
</head>
<body>
     <p>Understanding HTML pre tag</p>
     <pre>Hey there!       Greetings from Codedamn.
Hope you are having a great day.
    Don't forget to explore our courses to enhance your knowledge.</pre>  
</body>
</html>
Code language: HTML, XML (xml)

Code Output:

As we can see in the output code image above all the extra white spaces and the line breaks are preserved as it was in the code even after rendering and the font family of the text inside the <pre> tag has also changed.

Using Break (
) Tag in HTML

As the name itself suggests, the tag is used to break the text. To add some extra space below or above an element we can use a tag below or above that element respectively. The tag is used to add a line break in HTML i.e. adding a tag in HTML simply breaks the line and moves the content written after the tag to the next line.

The tag is usually used when you want to break the content into different parts but it belongs to the same HTML element. Let us say that you are writing a paragraph and for good readability’s sake you want to push some content to a new line but that content belongs to the same paragraph then you can use a tag. The tag does not require a closing tag.

Code Demonstration:

<!DOCTYPE html>
<html>
<head>
     <title>Codedamn</title>
</head>
<body>
     <p>Hey there, <br>Greetings from Codedamn!<br><br>Hope you are having a great day.</p>
</body>
</html>
Code language: HTML, XML (xml)

Code Output:

You can add as many tags as you wish but should avoid using it as we already mentioned that spacing and layouts should be handled by CSS only.

Using Paragraph (
) Tag in HTML

Well, I don’t think that you will need an explanation of what a is because this is one of the first few tags that everyone comes across when they start their journey in HTML. But the question arises how can a tag be used to add space in HTML? Well, the answer is pretty simple. The element is a block element i.e it takes the entire width of its parent element and every block element has an inbuilt line break before and after the element. This line breaks in the paragraph tag results in some extra space before and after the element.

Unlike, the tag, the paragraph tag in HTML requires a closing tag as well. The tag is a semantic HTML tag thus it makes our content more accessible to browsers, screen readers, and for indexing of the web pages.

Code Demonstration:

<!DOCTYPE html>
<html>
<head>
     <title>Codedamn</title>
</head>
<body>
     <p>Hey there</p>
     <p>Greetings from Codedamn!</p>
     <p>Hope you are having a great day.</p>
</body>
</html>
Code language: HTML, XML (xml)

Code Output:

As you can see from the above output that the element resulted in some space around each paragraph element.

How to Insert a Space in CSS

Spacing and layouts come under the category of CSS and thus CSS provides us with various ways to deal with spacing in HTML like changing text alignment, adding text indentation, or playing around with CSS box-model properties such as margin and padding by just adding a single line of code.

Now let us explore all these ways one by one.

CSS text-indentation

CSS provides us with a property to add an indent at the start of the block elements like the element by simply using CSS text-indent property. The text-indent property takes the indentation width which is usually 4 blank spaces or a tab space.

Syntax:

text-indent: 2rem;
Code language: CSS (css)

The text-indent can take values with different units like em, px, percentage, rem, etc. Now let us see a code example to understand better.

Code Demonstration:

<!DOCTYPE html>
<html>
<head>
    <title>Codedamn</title>
    <style>
       .box{

        border: 2px solid black;
       }
       .para1 {
        text-indent: 2em;
       }
       .para2 { 
        text-indent: 52px;
       }
       .para3 { 
        text-indent: 4%;
       }
    </style>
</head>
<body>
    <div class= "box">
       <p class= "para1">Hey there</p>
       <p class= "para2">Greetings from Codedamn!</p>
       <p class= "para3">Hope you are having a great day.</p>
    </div>
</body>
</html>
Code language: HTML, XML (xml)

Code Output:

In the above example, we indented the first paragraph by 2em, the second paragraph by 52px, and the third paragraph by 4% (i.e. 4% width of the parent element which is the box element in this case). Using the CSS text-indent property is much easier than using multiple extended HTML characters like   etc.

CSS text-align Property

The alignment of text in CSS can easily be handled by the CSS text-align property. This property allows us to align the text to the right or left of the screen or inside its parent block. We can also align the text to the center or even justify the text.

Syntax:

text-align: center;
Code language: CSS (css)

Code Demonstration :

<!DOCTYPE html>
<html>
<head>
     <title>Codedamn</title>
     <style>
        .box{
         padding: 1rem;
         border: 2px solid black;
        }
        .para1 { text-align: left;}
	.para2 { text-align: right;}
	.para3 { text-align: center;}
	.para4 { text-align: justify;}
     </style>
</head>
<body>
     <div class= "box">
     <p><strong>Left aligned text</strong></p>
     <p class= "para1">Hey there, Greeting from Codedamn! Hope you are having a great day. Don't forget to browse our the structured roadmaps (learning paths), or see all courses. You can also practice coding for free on codedamn playgrounds.</p>
     <p><strong>Right aligned text</strong></p>
     <p class= "para2">Hey there, Greeting from Codedamn! Hope you are having a great day. Don't forget to browse our the structured roadmaps (learning paths), or see all courses. You can also practice coding for free on codedamn playgrounds.</p>
     <p><strong>Center aligned text</strong></p>
     <p class= "para3">Hey there, Greeting from Codedamn! Hope you are having a great day. Don't forget to browse our the structured roadmaps (learning paths), or see all courses. You can also practice coding for free on codedamn playgrounds.</p>
     <p><strong>Justified text</strong></p>
     <p class= "para4">Hey there, Greeting from Codedamn! Hope you are having a great day. Don't forget to browse our the structured roadmaps (learning paths), or see all courses. You can also practice coding for free on codedamn playgrounds.</p>
     </div>
</body>
</html>
Code language: HTML, XML (xml)

In the example above we have aligned the first paragraph element to the left of the box, the second paragraph element aligned to the right of the box, the third paragraph element aligned in the center of the box, and the fourth paragraph element are justified i.e it took the entire width of the box div.

Add vertical/line spacing between text lines

Now that we have talked about horizontal spacing between the text, what if we want to add vertical space as well between the line? Don’t worry we have got you covered! The vertical spacing between the lines can be increased using the line height property of CSS.

Code Demonstration:

<!DOCTYPE html>
<html>
<head>
     <title>Codedamn</title>
</head>
<body>
     <p>Let us see an example of a paragraph in HTML with a line height of 3rem</p>
     <p style="line-height: 3rem">Hey there! Greetings from Codedamn. Hope you are having a great day. Don't forget to explore our courses to enhance your knowledge.</p>  
</body>
</html>
Code language: HTML, XML (xml)

Code Output:

As we can see in the example above we gave a line-height of 3 rem in the second paragraph whereas the first paragraph has a default line-height given by the browser itself in the user-agent-stylesheet.

Margin & Padding Property of CSS Box Model

The most accurate way of handling spacing in CSS is through the margin and padding properties of the CSS box model. Every element in HTML is wrapped in a box known as the CSS box model.

The CSS box model consists of the element, padding, border, & margin. The image below demonstrates the box model in CSS.

Out of these four elements of the box model, for spacing, we just need to play around with margin and padding.

The padding adds space between the content and the border of the element while the margin adds a transparent space outside the border.

Syntax of margin:

margin: 16px;
/*   OR    */
margin: 1rem 2rem 1.5rem 3rem;
Code language: CSS (css)

Syntax of padding:

padding: 3em;
/*   OR    */
padding: 16px 10px 24px 15px;
Code language: CSS (css)

Margin and padding both can take four values for margin-top, margin-right, margin-bottom, and margin-left respectively. Now let us see a code demonstration of using margin and padding to add space.

Code Demonstration:

<!DOCTYPE html>
<html>
  <head>
    <title>Codedamn</title>
    <style>
      .box {
        padding: 1rem;
        margin: 2rem;
        border: 2px solid black;
      }
      p {
        border: 2px solid black;
        margin: 1rem;
        padding: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>
        Hey there, Greeting from Codedamn! Hope you are having a great day.
        Don't forget to browse our the structured roadmaps (learning paths), or
        see all courses. You can also practice coding for free on codedamn
        playgrounds.
      </p>
      <p>
        Hey there, Greeting from Codedamn! Hope you are having a great day.
        Don't forget to browse our the structured roadmaps (learning paths), or
        see all courses. You can also practice coding for free on codedamn
        playgrounds.
      </p>
    </div>
  </body>
</html>
Code language: HTML, XML (xml)

Code Output:

As we can understand from the code output that the box has some space outside its border because of the margin (margin: 2rem;) and also some space between the paragraph elements and the border of the box which is because of padding (padding: 1rem;).
Also, both paragraphs have some space in between them which is due to a margin of 1rem given to paragraph elements and also the paragraph elements have some space between their borders and their content which is due to padding of 2rem.

Conclusion

Now through this article, we have figured out several ways to avoid white space collapsing in HTML using HTML as well as CSS.

I hope you found this article helpful. Now go and make some space in your HTML. ?

How to add space in HTML?

Ways to Add Space in HTML

Extended HTML Characters

HTML Preformatted Text (
) Tag

Using Break (
) Tag in HTML

Using Paragraph (
) Tag in HTML

How to Insert a Space in CSS

CSS text-indentation

CSS text-align Property

Add vertical/line spacing between text lines

Margin & Padding Property of CSS Box Model

Conclusion

No comments so far

Ways to Add Space in HTML

Extended HTML Characters

HTML Preformatted Text () Tag

Using Break () Tag in HTML

Using Paragraph () Tag in HTML

How to Insert a Space in CSS

CSS text-indentation

CSS text-align Property

Add vertical/line spacing between text lines

Margin & Padding Property of CSS Box Model

Conclusion

No comments so far

HTML Preformatted Text (
) Tag

Using Break (
) Tag in HTML

Using Paragraph (
) Tag in HTML