Why are extra spaces collapsed in HTML text?

[HTMLCodeRunner Editorial]

You typed several spaces in a paragraph and expected them to create aligned columns.

[HTMLCodeRunner Editorial]

Detailed answer

Normal text rendering collapses sequences of whitespace.

Extra source spaces are not a dependable layout technique. Use CSS for presentation and pre for meaningful whitespace such as a code listing. A newline in source does not have the same meaning as an explicit br element.

Example

<p>One     space between words.</p>
<pre>line one
    indented line two</pre>

Understanding the behavior

Normal HTML text layout collapses runs of whitespace, including many line breaks in source. Use paragraphs for paragraphs and CSS for spacing. A string of spaces is unreliable for aligning columns or creating indentation.

Practical implementation notes

Use pre for content whose line breaks and spacing are meaningful. For a visual layout, use CSS grid or flexbox so the result can adapt to narrow screens and different font sizes.

How to check it

Compare normal paragraph text with the same text in pre, then resize the window.

Expected result

The paragraph collapses spaces; pre preserves meaningful line breaks and indentation.

Watch out: Avoid chains of nonbreaking spaces to align a page.

Read the reference ↗

[Author]

Posts