Adding spaces in HTML
Type five spaces between two words in HTML and the browser shows one. Any run of spaces, tabs and newlines collapses into a single space. To add extra spaces, use the non-breaking space entity , once per space:
works for a few spaces in a line of text. For bigger gaps, or space between elements, use CSS, shown further down.
What does
is the non-breaking space (character U+00A0). It has two effects:
- It never collapses, so three of them make three spaces.
- The line never breaks at it, so the words on both sides stay together.
The second one is its real job. Numbers and their units, initials, and short phrases that look wrong split across two lines are joined with :
In the gray box "10" and "km" land on different lines. In the green one they cannot be separated. To keep a longer stretch together, white-space: nowrap on a span is easier than chaining entities; see the line break page.
Space entities of different widths
HTML has named characters for wider and narrower spaces. They do not collapse either, so they are handy for fine spacing in text:
| Entity | Name | Width |
|---|---|---|
| Non-breaking space | Same as a normal space |
  | En space | Half an em |
  | Em space | One em (the font size) |
  | Thin space | A fraction of an em, depends on the font |
  | Narrow no-break space | Thin, and no line break |
The blue highlight shows the width of each space. Only and   also stop line breaks.
Keeping every space: pre and white-space
When spacing is part of the content (code, ASCII art, aligned columns, poetry), keep all whitespace instead of adding entities. The <pre> element does this by default, and the CSS white-space property does it for any element:
white-space value | Spaces | Newlines | Wraps long lines |
|---|---|---|---|
normal (default) | Collapse | Become spaces | Yes |
nowrap | Collapse | Become spaces | No |
pre | Kept | Kept | No |
pre-wrap | Kept | Kept | Yes |
pre-line | Collapse | Kept | Yes |
pre-wrap is usually the one you want for user text: it keeps the spacing and still wraps inside narrow screens. pre keeps lines as they are and scrolls or overflows instead.
Tabs are kept inside pre as well. Their width is 8 spaces by default and the tab-size property changes it (tab-size: 4).
Spacing with CSS
Most "I need a space here" moments are really layout, and CSS does them better than entities, because the gap stays consistent and changes in one place:
margin and padding space elements, gap spaces items in a flex or grid container, letter-spacing and word-spacing space the text itself. To indent the first line of a paragraph, use text-indent, covered on the center text page.
The gap between inline elements
The flip side of collapsing: whitespace between two inline or inline-block elements still counts as one space. A newline between two buttons in your source puts a small gap between them:
The first pair has a gap from the newline in the source. In a flex container the whitespace between items is ignored, so the second pair touches. Use flex and gap when you want to control the space exactly.
Common mistakes
- Chains of
for layout. They break as soon as the font or screen size changes. Usemargin,paddingorgap. - Typing extra spaces and expecting them to show. They collapse. Use
orwhite-space: pre-wrap. - Writing
 without the semicolon. Browsers usually accept it, but it is invalid and fails in some positions. Always end with;. - Using
everywhere to stop wrapping. A long run of non-breaking text overflows on phones. Join only what must stay together. - Indenting paragraphs with spaces. Use
text-indentin CSS.
Frequently Asked Questions
How do I add a space in HTML?
A single space works as typed, but extra spaces collapse into one. For more, use the non-breaking space entity , one per space: a b. For layout gaps, use CSS margin, padding or gap instead.
What does mean in HTML?
is a non-breaking space. It looks like a normal space, but the browser never breaks a line at it and never collapses it, so it keeps words like 10 km together and lets you add extra spaces.
Why does HTML ignore my spaces?
HTML collapses whitespace: any run of spaces, tabs and newlines is displayed as a single space, and whitespace at the start and end of a line is removed. Use , <pre> or the CSS white-space property to keep it.
How do I add a tab in HTML?
HTML has no visible tab outside preformatted text. Inside <pre> or an element with white-space: pre, a tab character is kept and the CSS tab-size property sets its width. For indenting a paragraph, use text-indent or padding-inline-start in CSS.
What is the difference between and  ?
is as wide as a normal space.   is half an em wide and   is one em wide (the width of the font size).   and   do not collapse, but unlike a line may still break at them.
