HTML Spaces

Spaces in HTML can be added to any element and gives extra room to these elements. Spacing can be defined with space characters -- there are several --, or with CSS padding and margin properties.

HTML Tutorial

Example

Text with extra spacing between the words.
The spaces are generated with the ' ' (space) and the   (non-breaking space) characters.

Text   with spaces        in between the   words.

<p>
  Text&nbsp;&nbsp; with spaces
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  in between the&nbsp;&nbsp; words.
</p>

Adding Spaces

For text, to add extra spacing use a non-breaking space symbol (&nbsp;).

In other situations, the CSS padding property can be used to add space inside an element.

For more space, the CSS margin property can add space outside an element.


What is whitespace?

Whitespace are characters that are not visible. They include:

  • spaces,
  • tabs, and
  • line-breaks (carriage returns or line feeds or both)

Why is this important?

In a word processor, for example, these characters are not visible, but they do have an effect on the spacing and formatting of the text. However, in HTML things are different: the browser collapses multiple whitespace characters into a single space.

This HTML has multiple spaces between the words, and CRLF (carriage return, linefeed) characters at the end of each line. The browser will collapse all whitespace characters.

<p>
   Here   is text   with spaces     

   between the words     .
</p>

The browser turns the HTML into this output:

Here is text with spaces between the words .


Maintaining spaces and formatting

What if you want to maintain the specified spacing and formatting?
There are 2 options:

  1. Using a <pre> tag, or
  2. Adding HTML spacing and formatting.

Using a <pre> tag

Replacing the <p> tag with <pre> gives these results:

   Here   is text   with spaces     

   between the words     .
<pre>
   Here   is text   with spaces     

   between the words     .
</pre>

Indeed, <pre> preserves the original formatting, but it also changes the font to monospaced. All this can be corrected, but <pre> is not always the optimal solution. A more common approach is HTML spacing.

Adding HTML spacing and formatting

Alternatively, you may add HTML symbols and elements like so:

Here   is text   with spaces

between the words     .

<p>
   Here &nbsp;&nbsp;is text &nbsp;&nbsp;with spaces<br />
   <br />
   between the words &nbsp&nbsp;&nbsp&nbsp;.
</p>

The non-breaking space character (&nbsp;) forces the browser to maintain the space.
The <br /> element forces a line break.


Non-breaking space: &nbsp;

The non-breaking space character (&nbsp;) adds a space that is not collapsed by the browser.
In addition, as the name implies, it also prevents the browser from breaking two words at that location.

In this example, 10 &nbsp; spaces are added at the beginning of the text. Another &nbsp; is placed between '4 PM' which will not be separated when the sentence wraps due to space constraints.

           It's past 4 PM already.

<p>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  It's past 4&nbsp;PM already.
</p>

The padding property

The CSS padding property adds inner spacing to an element.
It accepts one to four values starting from top, right, bottom, and right side.

A <div> element with 40 pixels padding on all sides.

A div with 40 pixels inner spacing.
<div style="padding: 40px; background: #f6f8ff; border: 2px solid #4238ca;">
  A div with 40 pixels inner spacing.
</div>

The margin property

The CSS margin property adds spacing outside the element.
It accepts one to four values starting from top, right, bottom, and right side.

A <div> element with 40 pixels margin on all sides.

A div with 40 pixels outer spacing.
<div style="margin: 40px; background: #f6f8ff; border: 2px solid #4238ca;">
  A div with 40 pixels outer spacing.
</div>

Did you know?

Did you know?

Using padding vs margin

Both padding and margin add spacing to an element.

The space created with padding is considered part of the element itself.

The space created with margin is considered to be outside of the element.

This difference affects the click region, background colors, and other such properties for the element.


You may also like

Guides