HTML Blank Space: Spaces,   and CSS Spacing

HTML normally collapses consecutive spaces, tabs and source line breaks into a single displayed space. If spacing is only visual, use CSS. Use   when you specifically need a non-breaking space that keeps adjacent content together.

<p>Link1 Link2 Link3</p>
<p>Link1&nbsp;Link2</p>

The first line uses an ordinary space. The second uses a non-breaking space between Link1 and Link2, so the browser avoids breaking the line at that position.

Why Multiple Spaces Collapse Top ↑

In normal HTML text, runs of spaces and other collapsible whitespace are displayed as one space. Adding more spaces in the source therefore does not reliably create a larger visual gap.

<p>Link1     Link2     Link3</p>

The browser normally renders the gaps above as single spaces. This behavior keeps ordinary text formatting independent from source-code indentation.

Using   for a Non-Breaking Space Top ↑

  represents a non-breaking space. It is useful when two pieces of content should stay together on the same line, such as a number and unit or a short label and value.

<p>20&nbsp;km</p>
<p>₹500&nbsp;only</p>

Can I repeat   to make a wider gap? Top ↑

You can, and older HTML pages often do this, but repeated non-breaking spaces are usually the wrong tool for layout. The spacing becomes tied to text characters instead of the page layout.

<p>Link1&nbsp;&nbsp;&nbsp;Link2</p>

For visual separation between links, controls or blocks, prefer CSS.

Create Blank Space with CSS Top ↑

CSS gives predictable control over visual spacing. Use margin for space outside an element, padding for space inside an element and gap for spacing between flex or grid items.

Padding Top ↑

<span style="padding-left: 20px;">This text starts 20px from the left.</span>

Margin Top ↑

<div style="margin-left: 20px;">
  Indented block-level element.
</div>

Gap between a group of items Top ↑

<nav style="display: flex; gap: 1rem;">
  <a href="#one">Link 1</a>
  <a href="#two">Link 2</a>
  <a href="#three">Link 3</a>
</nav>

For a navigation menu, gap is generally clearer than inserting spaces or separator characters only to push links apart.

Indenting the First Line of Text Top ↑

If the goal is paragraph indentation rather than generic spacing, use CSS text-indent.

<p style="text-indent: 4em;">
  This paragraph begins with a first-line indent.
</p>

text-indent affects the first line of the block. It is not a replacement for margin or padding when the entire element needs to move.

Preserving Spaces and Line Breaks with <pre> Top ↑

When whitespace itself is meaningful, use the <pre> element. It preserves sequences of spaces and line breaks rather than collapsing them like ordinary HTML text.

<pre>
Name       Score
Asha       92
Ravi       88
</pre>

Do not use <pre> merely to position page elements. Use semantic tables, lists or CSS layout when those better describe the content.

Blank Lines and Line Breaks Top ↑

The <br> element creates a line break within text. It is appropriate when the line break is part of the content, such as an address or poem.

<p>12 Example Street<br>
Hyderabad<br>
India</p>

Do not add repeated <br> elements just to create vertical page spacing. Use CSS margin or padding for that.

Legacy Technique: Transparent Spacer Images Top ↑

Older web pages sometimes created horizontal gaps by stretching a transparent one-pixel image:

Word 1 <img src="dot.gif" height="1" width="20" alt=""> Word 2

Common HTML Spacing Mistakes Top ↑

Repeating &nbsp; for layout Top ↑

Use non-breaking spaces because the content must not wrap there, not because you need an arbitrary visual gap.

Typing many regular spaces in the source Top ↑

Normal HTML collapses them. Use CSS when the desired result is visual spacing.

Using repeated <br> tags for vertical spacing Top ↑

Line breaks are content, not a layout system. Use CSS margin or padding between blocks.

Using <pre> to align structured data Top ↑

If the content is a real table or list, use the corresponding semantic HTML element instead of spaces.

Using spacer images Top ↑

This historical technique is unnecessary in modern HTML/CSS and makes responsive layouts harder to maintain.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: