HTML Whitespace — How Browsers Handle Spaces and How to Remove Them

HTML collapses multiple spaces into one and ignores most line breaks. Understanding HTML whitespace helps you minify HTML effectively and avoid unexpected display issues when...

Mian Ali Khalid · 2026-05-11 · 4 min read

Use the tool

HTML / CSS / JS Minifier

Minify HTML, CSS, or JavaScript. Strips whitespace, comments, and unnecessary characters. Shows size reduction percentage.

Open HTML / CSS / JS Minifier →

HTML whitespace handling is subtle: browsers collapse multiple spaces to one, ignore leading/trailing whitespace in most contexts, but preserve whitespace in <pre> and inline elements. Getting this wrong when minifying HTML can break layouts.

Use the HTML Minifier to safely remove whitespace from HTML files.

How browsers handle whitespace

The browser collapses whitespace in HTML text nodes:

<p>Hello    world  
  how are you</p>

Renders as: “Hello world how are you” — multiple spaces and newlines become a single space.

Whitespace between inline elements

<!-- This creates a 4px gap between the buttons: -->
<button>First</button>
<button>Second</button>

<!-- Because there's a text node containing "\n  " between them -->

The whitespace text node becomes a single space character, creating a gap between inline elements. This was a common issue with display: inline-block layouts.

Solutions:

<!-- Remove whitespace in source: -->
<button>First</button><button>Second</button>

<!-- Comment out the whitespace: -->
<button>First</button><!--
--><button>Second</button>

<!-- Or just use flexbox (modern solution): -->
<div style="display: flex;">
  <button>First</button>
  <button>Second</button>
</div>

Whitespace-sensitive elements

Some elements preserve whitespace:

<!-- <pre> preserves all whitespace: -->
<pre>
  function hello() {
    return "world";
  }
</pre>

<!-- <textarea> preserves whitespace: -->
<textarea>  spaces preserved  </textarea>

<!-- CSS white-space: pre preserves it too: -->
<p style="white-space: pre;">  spaces here  </p>

Safely removable whitespace

HTML minifiers can safely remove:

<!-- Before: -->
<html>
  <head>
    <title>  My Page  </title>
  </head>
  <body>
    <h1>  Hello World  </h1>
    <p>
      Some text here.
    </p>
  </body>
</html>

<!-- After aggressive minification: -->
<html><head><title>My Page</title></head><body><h1>Hello World</h1><p>Some text here.</p></body></html>

Safe to remove:

Whitespace between block-level elements (<div>, <p>, <h1>, etc.)
Whitespace at start/end of block elements
Multiple spaces collapsed to one
HTML comments (except conditional comments for IE)

Unsafe to remove:

Whitespace between inline elements (can change rendering)
Whitespace inside <pre>, <textarea>, <code> elements
Whitespace in attribute values

HTML whitespace in attribute values

<!-- Multiple spaces in attributes are treated as one: -->
<input type="text"   name="email"   placeholder="Enter email">
<!-- → attribute values work the same: multiple spaces → one -->

<!-- But whitespace at start/end matters sometimes: -->
<input placeholder="  Enter email  ">
<!-- Placeholder has leading/trailing spaces visible in input -->

CSS `white-space` property

Controls how whitespace in the HTML source is handled in the display:

white-space: normal;    /* Default: collapse, wrap */
white-space: nowrap;    /* Collapse, no wrap */
white-space: pre;       /* Preserve, no wrap */
white-space: pre-wrap;  /* Preserve, wrap */
white-space: pre-line;  /* Collapse spaces, preserve newlines, wrap */
white-space: break-spaces; /* Like pre-wrap but spaces break at end */

Non-breaking space

  is a special whitespace that:

Does not collapse with adjacent spaces
Does not create a line break
Represents U+00A0 (non-breaking space)

<!-- Prevent line break between "Mr." and "Smith": -->
Mr.&nbsp;Smith

<!-- Create actual visible space (when CSS not appropriate): -->
Price:&nbsp;$99

HTML minifiers should not remove   entities.

Minification and whitespace removal

// Manual whitespace removal (simplified):
function minifyHtml(html) {
  return html
    .replace(/<!--[\s\S]*?-->/g, '')        // Remove comments
    .replace(/>\s+</g, '><')                // Between elements
    .replace(/\s{2,}/g, ' ')               // Multiple spaces to one
    .replace(/^\s+|\s+$/gm, '');           // Leading/trailing per line
}

// Better: use a proper library that handles edge cases:
import { minify } from 'html-minifier-terser';

const minified = await minify(html, {
  collapseWhitespace: true,
  conservativeCollapse: true,    // Keep one space minimum
  collapseInlineTagWhitespace: false,  // Safer for inline
  removeComments: true,
  minifyCSS: true,
  minifyJS: true,
});

HTML Minifier — safely minify HTML files
HTML Minification Explained — what minification does
HTML Minifier Tools — tool comparison

Critical CSS Inlining — Eliminate Render-Blocking CSS for Faster Load — Critical CSS inlining embeds above-the-fold styles directly in HTML to eliminate…
GZIP Compression for HTML — How It Works and How to Enable It — GZIP compression reduces HTML file size by 60-80% before sending to browsers. Le…
HTML Comments Guide — Syntax, Uses, and When Minifiers Remove Them — HTML comments use  syntax and are removed by minifiers unless they're co…
HTML Minification Explained — What Gets Removed and Why — HTML minification removes whitespace, comments, and redundant attributes to redu…
HTML Minification — What It Does and How Much It Saves — HTML minification removes whitespace, comments, and redundant attributes to redu…

Related tool