How to Add Space in HTML?

To add space in HTML, you can use a combination of HTML entities, CSS properties, and HTML elements depending on whether you want space inside text, between elements, or within the layout. Here are the most effective methods:

1. Adding Space in Text

Non-Breaking Space Entity

Use   to insert a space that the browser will not collapse.

Example:

<p>1&nbsp;000&nbsp;000</p>

For larger gaps:

•   creates an “en” space (wider than a normal space).
•   creates an “em” space (even wider).

<p>&ensp;This is an em space.<br>&emsp;This is an en space.</p> 

This method is ideal for adding small, controlled spaces between words or numbers.

2. Adding Space Between Elements

CSS Margin (External Space)

Use the margin property to add space outside elements.

.spaced { 

    /* Adds space below the element */
    margin-bottom: 20px; 
} 

<div class="spaced">Element 1</div>
<div class="spaced">Element 2</div>

CSS Padding (Internal Space)

Use the padding property to add space inside elements, between the border and the content.

.padded { 
    padding: 20px; 
} 

<div class="padded">This div has internal space.</div>

3. Adding Space Between Lines or Characters (Text Spacing)

line-height: Controls space between lines.

p { line-height: 1.8; }

word-spacing: Controls space between words.

p { word-spacing: 16px; }

letter-spacing: Controls space between characters.

h1 { letter-spacing: 3px; }

text-indent: Indents the first line.

p { text-indent: 30px; }

4. Using HTML Tags

<br> (Line Break): Creates a new line, adding vertical space.

Line one.<br>
Line two.

<hr> (Horizontal Rule): Adds a horizontal line with vertical spacing.

<p>Above the line</p>
<hr>
<p>Below the line</p>

<p> (Paragraph): Browsers automatically add vertical space above and below paragraphs.

<p>Paragraph one.</p>
<p>Paragraph two.</p>

5. Space in Tables

• Use table attributes and CSS for cell spacing:
  • cellpadding and cellspacing (HTML attributes, mostly for legacy code)
  • Prefer padding and border-spacing in CSS:

table { 
    border-spacing: 10px; /* adds space between table cells */ 
} 
td, th { 
    padding: 8px; /* adds space inside cells */ 
}

Key Takeaways

• Use   for adding manual spaces in inline text.
• Control bigger spaces between elements using CSS margin and padding—the preferred approach for layouts.
• CSS text properties (letter-spacing, word-spacing, etc.) let you fine-tune spacing within text.
• Structural HTML tags (<br>, <hr>, <p>) give you vertical space between elements.

By selecting the most suitable method, you can flexibly and elegantly manage spacing in your HTML documents.