HtmlHow-ToBeginner · 3 min read

How to Add Space in HTML: Simple Methods Explained

To add space in HTML, use the entity for extra spaces inside text or CSS properties like margin and padding for spacing around elements. HTML ignores multiple normal spaces, so or CSS is needed to create visible gaps.

📐

Syntax

Here are common ways to add space in HTML:

: Adds a single non-breaking space inside text.
CSS margin: Adds space outside an element.
CSS padding: Adds space inside an element's border.

html

<!-- Non-breaking space -->
Hello&nbsp;&nbsp;World

<!-- CSS margin example -->
<p style="margin-left: 20px;">Indented paragraph</p>

<!-- CSS padding example -->
<div style="padding: 10px; border: 1px solid black;">Box with padding</div>

💻

Example

This example shows how to add space between words using and how to add space around elements using CSS margin and padding.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space in HTML Example</title>
  <style>
    .margin-box {
      margin: 20px;
      background-color: #d0f0c0;
    }
    .padding-box {
      padding: 20px;
      border: 2px solid #333;
      background-color: #f0d0c0;
    }
  </style>
</head>
<body>
  <p>Hello&nbsp;&nbsp;&nbsp;World! (3 spaces using &nbsp;)</p>
  <div class="margin-box">This box has 20px margin around it.</div>
  <div class="padding-box">This box has 20px padding inside it.</div>
</body>
</html>

Output

Hello World! (3 spaces using ) [Green box with space around it] [Orange box with space inside border]

⚠️

Common Pitfalls

Many beginners try to add multiple spaces by typing several normal spaces, but HTML collapses them into one. Using multiple is better for visible spaces inside text.

Also, avoid using multiple <br> tags to create vertical space; use CSS margin or padding instead for cleaner, accessible layouts.

html

<!-- Wrong: multiple spaces ignored -->
<p>Hello     World</p>

<!-- Right: use &nbsp; for extra spaces -->
<p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World</p>

<!-- Wrong: multiple <br> for spacing -->
<p>Line 1<br><br><br>Line 2</p>

<!-- Right: use CSS margin -->
<p style="margin-bottom: 30px;">Line 1</p>
<p>Line 2</p>

📊

Quick Reference

Method	Description	Use Case
	Non-breaking space character	Add extra spaces inside text
CSS margin	Space outside element border	Separate elements vertically or horizontally
CSS padding	Space inside element border	Add space inside boxes or buttons
<br>	Line break	Start new line, not for spacing
Multiple spaces	Collapsed by browser	Avoid for visible spacing

✅

Key Takeaways

Use to add extra spaces inside text because normal spaces collapse.

Use CSS margin to add space outside elements and padding to add space inside elements.

Avoid using multiple spaces or
tags for spacing; rely on CSS for better control.

Always use semantic HTML and CSS for spacing to keep your page accessible and clean.