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?

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

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-add-spaces-in-html-css/” title=”How To Add Spaces In HTML CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

 

TABLE OF CONTENTS

Download & Notes	Spacing	Useful Bits & Links
The End

 

 

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.

 

 

 

1) NON-BREAKING 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:

•   for one white space.
•   for two white spaces.
•   for four white spaces.

 

2) PARAGRAPHS

<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>

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

<p>
  Line one.<br>
  Line two.<br>
  Line three.
</p>

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

<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

<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>

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

<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>

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.

 

 

SUMMARY

Entity	Description	Reference
 	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

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

• The Box Model – MDN
• CSS Units and Values – MDN

 

INFOGRAPHIC CHEAT SHEET