Spacing can be added to any element and gives extra room to these elements.
Spaces can be defined with space characters, such as ' ' (space), and others.
Alternatively, spacing can be added with CSS padding and margin properties.
This example demonstrates text with extra spacing between the words.
The spaces are generated with the ' ' (space) and the (non-breaking space) characters.
Text with spaces between the words.
<p>
Text with spaces
between the words.
</p>
For text, to add extra spacing use a non-breaking space symbol ( ).
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.
Whitespace are characters that are not visible. They include:
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 .
What if you want to maintain the specified spacing and formatting?
There are 2 options:
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.
Alternatively, you may add HTML symbols and elements like so:
Here is text with spaces
between the words .
<p>
Here is text with spaces<br />
<br />
between the words     .
</p>
The non-breaking space character ( ) forces the browser to maintain the space.
The <br /> element forces a line break.
The non-breaking space character ( ) 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 spaces are added at the beginning of the text.
Another 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>
It's past 4 PM already.
</p>
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.
<div style="padding: 40px; background: #f6f8ff; border: 2px solid #4238ca;">
A div with 40 pixels inner spacing.
</div>
For more details on the padding, see our CSS padding property reference.
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.
<div style="margin: 40px; background: #f6f8ff; border: 2px solid #4238ca;">
A div with 40 pixels outer spacing.
</div>
For details on the margin, see our CSS margin property reference.
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.
