6 Ways To Add Spaces In HTML CSS (Simple Examples)

Welcome to a tutorial on how to add spaces in HTML and CSS. Is the text too cluttered on your webpage? Need some breathing space and decluttering magic?

There are a number of ways to add spaces in HTML and CSS:

  1. Use   to define a white space,   for 2 spaces, and   for 4 spaces.
  2. Paragraphs <p> to spread out text blocks.
  3. <br> to add a line break.
  4. <pre> to keep spacing and line-breaks as-it-is.
  5. Add extra padding and/or margin spaces – <p style="padding: 10px; margin: 10px">
  6. Control the spacing between each character, word, and line – <p style="letter-spacing: 5px; word-spacing: 10px; line-height: 15px;"

That covers the quick basics. But let us walk through some actual examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Spacing Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

ADDING SPACES IN HTML CSS

All right, let us now get into the ways and examples of adding spaces in HTML and CSS.

 

1) NON-BREAKING SPACES

1a-nonbreak-space.html
Non-breaking &nbsp; space.
2 non-breaking &ensp; spaces.
4 non-breaking &emsp; spaces.
Non-breaking   space.
2 non-breaking   spaces.
4 non-breaking   spaces.

By default, browsers will not render additional white spaces. If you want to specifically add spaces:

  • &nbsp; for one white space.
  • &ensp; for two white spaces.
  • &emsp; for four white spaces.

 

2) PARAGRAPHS

2-paragraph.html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium, lacus non tristique imperdiet, neque magna porttitor enim, eget iaculis erat enim et sapien.</p>
<p>Another Paragraph.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium, lacus non tristique imperdiet, neque magna porttitor enim, eget iaculis erat enim et sapien.

Another Paragraph.

This one should be self-explanatory, <p> creates a paragraph of text and the browser will automatically space out between each paragraph. Although we can also control the distance between each character, word, line, and block – Examples below.

 

 

3) LINE BREAKS

3-line-break.html
<p>
  Line one.<br>
  Line two.<br>
  Line three.
</p>
Line one.
Line two.
Line three.

By default, the browser will automatically wrap the text according to the width of the paragraph/container. To specifically add a break, use the line break <br> tag.

 

4) PRE-FORMATTED TEXT

4-pre.html
<pre>
Hello world.
        This is  a    pre-formatted    text  block.
  Be careful with how you use this.
      It retains all line breaks and          spaces.
</pre>
Hello world.
        This is  a    pre-formatted    text  block.
  Be careful with how you use this.
      It retains all line breaks and          spaces.

Once again, HTML will strip extra white spaces and ignore line breaks. If you want to retain all the spaces and breaks as-is-is, use a <pre> pre-formatted tag instead.

 

 

5) PADDING & MARGIN – SPACING BETWEEN PARAGRAPHS

5-padding-margin.html
<style>
/* (A) ADD PADDING, BORDER, MARGIN */
.demoA {
  padding: 10px;
  margin: 20px;
  border: 5px solid blue;
  background: aliceblue;
}
 
/* (B) SPECIFIC */
.demoB {
  /* (B1) PADDING & MARGIN */
  padding: 5px 10px 15px 20px; /* top right bottom left */
  margin: 5px 10px 15px 20px; /* top right bottom left */
 
  /* (B2) BORDERS */
  border-top: 5px solid red;
  border-right: 5px solid green;
  border-left: 5px solid blue;
  border-bottom: 5px solid cyan;
 
  /* (B3) BACKGROUND */
  background: palegreen;
}
</style>
 
<p class="demoA">Line.</p>
<p class="demoA">Another Line.</p>
<p class="demoB">Line.</p>

Line.

Another Line.

Line.

As in the introduction above, we can specify the padding and margin to control the spacing between each paragraph. But instead of leaving you confused on how this actually works, let me introduce the CSS box model:

Yes, nearly every HTML element follows this box model.

  • In the center, we have the contents. This can be the text for <p>, video for <video>, image for <img>, etc…
  • The content is surrounded by a layer of padding, followed by the border.
  • Finally, margin is the spacing between each HTML element.

 

 

6) SPACING BETWEEN CHARACTER/TEXT/LINE

6-text-spacing.html
<style>
.demoC {
  /* SPACING BETWEEN EACH CHARACTER */
  letter-spacing: 3px;
 
  /* SPACING BETWEEN EACH WORD */
  word-spacing: 1em;

  /* SPACING BETWEEN EACH LINE */
  line-height: 200%;
}
</style>
 
<p class="demoC">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ultimately, padding and margin will only affect the entire block of text. To control the spacing between the text itself:

  • letter-spacing will specify the space in-between each character.
  • word-spacing will specify the space in-between each word.
  • line-height will specify the space in-between each line of text.

 

USEFUL BITS & LINKS

That’s all for this project, and here is a small section on some extras and links that may be useful to you.

 

SUMMARY

HTML
Entity Description Reference
&nbsp; Adds a non-breaking space. Click Here
<p></p> A paragraph. Click Here
<br> Line break. Click Here
<pre></pre> Preformatted text block. Retains all spaces and line breaks. Click Here
CSS
Property Description Reference
padding border margin The Box Model – Contents, padding, border, margin. Click Here
letter-spacing Specify the spacing between each character. Click Here
word-spacing Specify the spacing between each word. Click Here
line-height Specify the height of each line of text. Click Here

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Add Spaces in HTML CSS (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “6 Ways To Add Spaces In HTML CSS (Simple Examples)”

  1. Thank you for the nice and concise clarifications .
    I was looking for a way to add space below in the website without using footer and without adding html empty elements . I would appreciate your reply. Thanks!

Leave a Comment

Your email address will not be published.