How to Add Blank Spaces in HTML (All Methods)
HTML collapses whitespace by default. If you type five spaces between two words in your source code, the browser renders one. If you add three blank lines between paragraphs, the browser ignores them. This whitespace collapsing behavior is fundamental to how HTML works. The browser treats any sequence of spaces, tabs, and line breaks as a single space character when rendering text.
This means adding blank spaces in HTML requires specific techniques rather than simply typing spaces in the source code. HTML entities, CSS properties, and semantic tags each provide different ways to control spacing. The right method depends on whether you need horizontal spacing between characters, vertical spacing between elements, preserved formatting in a code block, or consistent layout spacing across a responsive design. This guide covers every available method.
Quick Answer: How Do You Add Blank Spaces in HTML?
Use the entity for single non-breaking spaces between words. Use   or   for wider spaces. Use CSS margin and padding for structural spacing between elements. Use the <pre> tag or CSS white-space: pre to preserve exact whitespace from the source code.
Why Does HTML Collapse Whitespace?
HTML was designed to separate content structure from visual presentation. The browser is responsible for rendering the layout, and whitespace collapsing is part of that rendering process.
The Default Behavior
When the browser parses HTML, it converts any sequence of whitespace characters (spaces, tabs, newlines) into a single space. This means the following two lines render identically:
<p>Hello World</p> <p>Hello World</p>
The first line, despite having five spaces in the source, renders with one space between “Hello” and “World.” The second line uses five entities, which the browser preserves as five visible spaces.
Why It Matters
Understanding whitespace collapsing is the foundation for choosing the right spacing method. If you need the browser to respect exact spacing from your source code, you need entities, CSS, or the <pre> tag. If you need structural spacing between page elements, CSS properties like margin and padding are the correct approach.
How Do HTML Space Entities Work?
HTML provides several named entities that insert space characters of specific widths. These entities are not collapsed by the browser.
Non-Breaking Space ( )
The entity inserts a space that the browser does not collapse. Unlike a regular space, is always rendered. It also prevents a line break from occurring at its position, which is why it is called “non-breaking.”
Using multiple entities in a row creates wider gaps: produces three spaces. This is the most common method for adding extra horizontal space in HTML text content.
En Space ( )
The   entity inserts a space equal to half the width of the current font’s em size. An en space is wider than a regular space but narrower than an em space. It provides a consistent space width that scales with font size.
Em Space ( )
The   entity inserts a space equal to the full em size of the current font. An em space is roughly the width of the letter “M” in the active font. It is the widest standard space entity and is useful for creating noticeable gaps between text elements.
Thin Space ( )
The   entity inserts a space narrower than a regular space. It is commonly used in typography for spacing around punctuation marks, between quotation marks and adjacent characters, and in numeric formatting.
When to Use Entities
Space entities are best suited for inline text spacing where you need precise character-level control. They are not ideal for structural layout spacing. Using dozens of entities to push an element across the page is technically functional but semantically incorrect and difficult to maintain. For the invisible blank character specifically designed for web text fields and forms, the HTML blank space character page provides the ready-to-use character.
How Does the Pre Tag Preserve Whitespace?
The <pre> tag tells the browser to preserve all whitespace exactly as it appears in the source code. Spaces, tabs, and line breaks are rendered as-is without collapsing.
Basic Usage
Wrapping text in <pre> tags preserves its formatting:
<pre> This text has extra spaces. And this line is separate. </pre>
The browser renders the text with the exact spacing and line breaks from the source. The <pre> tag also applies a monospace font by default, which ensures consistent character widths.
Pre with Other Elements
The <pre> tag can contain other HTML elements like <code>, <span>, and <a>. Whitespace is preserved within the <pre> block regardless of the nested elements.
Limitations
The <pre> tag applies monospace styling and does not wrap long lines by default. For preserving whitespace without changing the font or breaking the page layout, the CSS white-space property is a more flexible alternative.
How Do CSS White-Space Properties Control Spacing?
The CSS white-space property controls how whitespace is handled within an element without requiring the <pre> tag.
white-space: pre
This value makes the element behave like a <pre> tag. All whitespace is preserved. Line breaks in the source code create line breaks in the rendered output. Text does not wrap automatically.
white-space: pre-wrap
This value preserves whitespace and line breaks but also allows text to wrap at the edge of the container. It is the most practical option for preserving spacing in normal page content because it prevents horizontal overflow.
white-space: pre-line
This value collapses sequences of spaces into a single space (like normal HTML) but preserves line breaks from the source code. It is useful when you want paragraph breaks without extra horizontal spacing.
Application
Apply the property to any element:
.preserved { white-space: pre-wrap; }
This approach is cleaner than using <pre> tags because it separates the spacing behavior from the HTML structure and does not alter the font. For understanding the zero-width space character and how it differs from visible space entities, the zero-width space guide explains its behavior in HTML and beyond.
How Do CSS Margin and Padding Create Blank Spaces?
Margin and padding are the primary CSS tools for adding blank space between and within page elements.
Margin
Margin creates space outside an element’s border. It pushes adjacent elements away. Use margin-top, margin-bottom, margin-left, and margin-right to control spacing in each direction.
.spaced-paragraph { margin-bottom: 2em; }
This adds two em units of blank space below every element with the class. The space is empty, containing no content or background color.
Padding
Padding creates space inside an element’s border, between the border and the content. It expands the element’s visible area without adding external space.
.padded-box { padding: 20px; }
This adds 20 pixels of internal space on all four sides of the element. If the element has a background color, the padding area is filled with that color.
Margin vs Padding
Use margin when you want blank space between separate elements. Use padding when you want blank space within a single element. The visual result can look similar, but the structural behavior differs. Margin collapses vertically between adjacent block elements (the larger margin wins). Padding does not collapse.
How Do You Add Blank Lines in HTML?
Blank lines (vertical space) between text or elements can be added through several methods.
The BR Tag
The <br> tag inserts a line break. Using multiple <br> tags in a row creates blank lines:
<p>First paragraph.</p> <br><br> <p>Second paragraph with extra space above.</p>
This method works but is not semantically ideal. The <br> tag is meant for line breaks within text (like addresses or poetry), not for layout spacing.
CSS Margin-Bottom
The cleaner approach is CSS margin:
p { margin-bottom: 40px; }
This creates consistent spacing below every paragraph element. The spacing is controlled from the stylesheet rather than the HTML, making it easier to maintain and adjust.
CSS Line-Height
The line-height property controls spacing between lines within a single text block. Increasing line-height adds vertical space between each line of text:
p { line-height: 2; }
This doubles the spacing between lines within paragraphs. It does not add space between separate paragraph elements.
How Do You Add Spaces in HTML Tables?
HTML table spacing is controlled through CSS properties specific to the table model.
Border-Spacing
The border-spacing property controls the space between table cells:
table { border-spacing: 15px; }
This adds 15 pixels of space between every cell in the table. The spacing applies both horizontally and vertically.
Cell Padding via CSS
Padding on table cells creates internal space within each cell:
td { padding: 10px; }
This adds 10 pixels of space between the cell border and the cell content on all four sides.
Empty Cells
An empty <td></td> element creates a blank cell in the table. The cell occupies its column width and row height but contains no visible content. This is a structural blank space within the table layout.
How Do Flexbox and Grid Handle Spacing?
Modern CSS layout methods provide their own spacing properties. If an invisible character is not rendering correctly in your HTML, the invisible character troubleshooting guide covers common issues and fixes.
Flexbox Gap
The gap property on a flex container adds space between flex items:
.flex-container { display: flex; gap: 20px; }
This adds 20 pixels of space between each child element. The gap is only between items, not before the first or after the last item.
Grid Gap
CSS Grid uses the same gap property:
.grid-container { display: grid; gap: 30px; }
Grid also supports row-gap and column-gap for independent control over vertical and horizontal spacing.
Why Gap Is Preferred
The gap property is cleaner than applying margins to individual child elements because it avoids the issue of extra margin on the first or last item. It is now the standard approach for spacing in modern layouts.
How Do You Use Invisible Unicode Characters for Spacing in HTML?
Beyond HTML entities and CSS, invisible Unicode characters can be inserted directly into HTML to create blank spaces.
Direct Insertion
Characters like the Hangul Filler (U+3164), Zero-Width Space (U+200B), and other invisible characters can be pasted directly into HTML source code. The browser renders them according to their Unicode properties.
The Unicode character generator on InvisiGenz provides these characters for direct copying. In HTML, they are useful in form fields, text inputs, and contexts where HTML entities are not processed.
HTML Numeric References
Invisible characters can also be inserted using HTML numeric character references. For example, ​ inserts a Zero-Width Space, and ㅤ inserts a Hangul Filler. These references work in any HTML context where entities are processed. For a complete catalog of every invisible Unicode character and its properties, the invisible Unicode characters explained reference covers the full set.
Use Cases
Invisible Unicode characters in HTML are useful for creating word break opportunities (Zero-Width Space), preventing unwanted line breaks (Word Joiner), and inserting blank content in form fields for testing or display purposes.
Frequently Asked Questions
Which method should you use for spacing between paragraphs?
CSS margin-bottom on paragraph elements is the correct method for inter-paragraph spacing. It separates presentation from content, is easy to adjust globally, and follows web standards. Using <br> tags or entities for paragraph spacing is considered poor practice.
Why do multiple spaces in HTML source code only show as one space?
The HTML specification defines whitespace collapsing as default browser behavior. Sequences of spaces, tabs, and newlines are reduced to a single space during rendering. This allows developers to format their source code for readability without affecting the visual output.
Can you use CSS to add space before the first letter of a paragraph?
The text-indent property adds horizontal space before the first line of a block element: p { text-indent: 2em; }. This indents the first line by two em units, creating a traditional paragraph indent without using space entities.
Does affect SEO or screen readers?
Excessive use of can affect screen reader behavior because screen readers may announce each non-breaking space individually. For SEO, does not directly affect rankings, but using it for layout purposes instead of CSS is considered poor accessibility practice.
How do you add a tab-sized space in HTML?
The tab character entity 	 inserts a tab in HTML. However, the browser collapses it like a regular space unless the element uses white-space: pre or is inside a <pre> tag. The CSS property tab-size controls the rendered width of tab characters when whitespace is preserved.
Can you use CSS gap with regular block elements?
The gap property works only on flex containers (display: flex) and grid containers (display: grid). It does not apply to regular block-level flow layout. For block elements, use margin for spacing.
Final Takeaways
Adding blank spaces in HTML requires choosing the right method for the right context. HTML entities ( ,  ,  ) handle inline character-level spacing. The <pre> tag and CSS white-space property preserve exact whitespace from the source code. CSS margin and padding control structural spacing between and within elements. The <br> tag creates line breaks for vertical spacing in text. Flexbox and Grid gap properties handle spacing in modern layouts.
The most common mistake is using or <br> tags for layout spacing that should be handled by CSS. Entities are for text. CSS is for layout. Keeping this distinction clear produces cleaner HTML, better accessibility, and easier maintenance. For invisible spacing that occupies no visual width, Unicode characters like the Zero-Width Space provide specialized behavior that standard HTML entities do not cover.
