How to Add Space in HTML

Use CSS spacing properties when you want to add controlled space in HTML layouts. The right method depends on whether you need space inside an element, outside an element, or between words and inline content.

What you’ll build or solve

You’ll learn how to add space in HTML using the correct spacing technique for the job. You’ll also know when to use margin, padding, or a non-breaking space for text.

When this approach works best

This approach is the right choice when content feels cramped, hard to scan, or too close together.

Common real-world scenarios include:

• Space between sections
• Space inside buttons and cards
• Extra spacing between inline words or labels
• Better breathing room in forms
• Cleaner landing page layouts

This is a bad idea when you try to use repeated spaces in HTML source code for layout. Browsers collapse normal spaces, so the result is unreliable.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Use the right spacing method for the exact space you need

Use margin for space outside an element.

<p class="intro">Welcome to the course.</p>

<style>
  .intro {
    margin-bottom: 24px;
  }
</style>

Use padding for space inside an element.

<button class="cta">Start lesson</button>

<style>
  .cta {
    padding: 12px 24px;
  }
</style>

For extra inline text spacing, use  .

<p>USA&nbsp;&amp;&nbsp;UK teams</p>

What to look for:

• Use margin for space between elements
• Use padding for space inside elements
• Use   for inline text spacing that should not collapse
• Do not use repeated normal spaces for layout
• Choose the method based on where the space should appear

Examples you can copy

Space between sections

<section class="hero">Hero content</section>

<style>
  .hero {
    margin-bottom: 48px;
  }
</style>

Space inside a card

<div class="card">Course details</div>

<style>
  .card {
    padding: 24px;
  }
</style>

Space between inline words

<p>France&nbsp;&amp;&nbsp;UK pricing</p>

Common mistakes and how to fix them

Mistake 1: Using repeated spaces in HTML source

What the reader might do:

<p>Hello     world</p>

Why it breaks: browsers collapse repeated normal spaces into a single space.

Corrected approach:

<p>Hello&nbsp;&nbsp;&nbsp;world</p>

Mistake 2: Using padding when the goal is space between elements

What the reader might do:

<p class="section">Section one</p>

<style>
  .section {
    padding-bottom: 40px;
  }
</style>

Why it breaks: padding adds space inside the element, so the content box grows instead of separating the next block cleanly.

Corrected approach:

<p class="section">Section one</p>

<style>
  .section {
    margin-bottom: 40px;
  }
</style>

Mistake 3: Using   for layout sections

What the reader might do:

<p>Title</p>
&nbsp;
&nbsp;
<p>Next section</p>

Why it breaks: inline text spacing is not a reliable way to separate full blocks.

Corrected approach:

<p class="title">Title</p>
<p>Next section</p>

<style>
  .title {
    margin-bottom: 32px;
  }
</style>

Troubleshooting

If repeated spaces disappear, switch to   for inline text spacing.

If the space appears inside the element instead of outside it, switch from padding to margin.

If the layout still feels cramped, increase the spacing value gradually.

If the spacing breaks on mobile, reduce large pixel values or use relative units like em.

Quick recap

• Use margin for space outside elements
• Use padding for space inside elements
• Use   for inline text spacing
• Do not rely on repeated normal spaces
• Match the spacing method to the exact layout need