Whitespace, including spaces, tabs, and line breaks, plays a crucial role in the visual presentation of text on web pages. While HTML generally collapses multiple whitespace characters into a single space, there are several techniques to control and define whitespace explicitly. This tutorial will cover various methods to insert and manage spaces within your HTML content.
Understanding HTML’s Default Behavior
By default, HTML ignores most whitespace (spaces, tabs, and newlines) in your code when rendering text. This means multiple spaces will be rendered as a single space, and line breaks within a paragraph will be ignored. This behavior is designed to allow developers to format their HTML code for readability without affecting the visual output.
1. Non-Breaking Space ( )
The entity represents a non-breaking space. Unlike regular spaces, a non-breaking space prevents the browser from collapsing multiple spaces into one. It also prevents line breaks from occurring within a phrase. This is useful when you need to ensure that two words remain on the same line or when you want to create a fixed-width space.
<p>This text will have multiple spaces.</p>
2. En Space ( ) and Em Space ( )
En spaces and em spaces provide more substantial spacing than a non-breaking space. Their width is relative to the current font size.
- En Space (
 ): Approximately half the width of the current font’s ‘M’ character. - Em Space (
 ): Equal to the width of the current font’s ‘M’ character.
These are particularly useful for typographic alignment and creating visual hierarchy.
<p>This text has en spaces.</p>
<p>This text has em spaces.</p>
3. Using CSS white-space Property
The CSS white-space property offers fine-grained control over how whitespace is handled.
white-space: pre;: Preserves all spaces and line breaks as they appear in the HTML source. This is similar to using the<pre>tag (explained below).white-space: nowrap;: Prevents text from wrapping to the next line, even if it overflows the container.white-space: pre-wrap;: Preserves spaces and line breaks, but wraps text when necessary to fit the container.white-space: pre-line;: Collapses sequences of whitespace characters, but preserves line breaks.
Example:
<p style="white-space: pre;">This text has multiple spaces.</p>
<p style="white-space: nowrap;">This text will not wrap.</p>
4. The <pre> Tag
The <pre> tag (preformatted text) preserves both spaces and line breaks exactly as they appear in the HTML source. It also uses a monospace font by default.
<pre>This
text
has
multiple
spaces and line breaks.</pre>
5. Using <span> with Width/Height (for Horizontal/Vertical Spacing)
You can create horizontal or vertical spacing using a <span> element with specified width or height, respectively.
- Horizontal Spacer:
<span style="display: inline-block; width: 20px;"></span>
- Vertical Spacer:
<span style="display: block; height: 10px;"></span>
This method effectively creates empty space without adding any visible content.
6. HTML Entities for Special Characters
Besides whitespace, HTML offers entities for other characters:
<represented as<>represented as>
These are essential when displaying these characters literally in your HTML to prevent them from being interpreted as HTML tags. A complete list of HTML entities can be found at https://www.w3schools.com/html/html_entities.asp.
By mastering these techniques, you can precisely control whitespace in your HTML, ensuring your content is displayed exactly as intended.