A deep dive into HTML whitespace collapsing: How it works, why it sucks, how it should work, and how to deal with it.

CNTXT

Abdullah Alshaye

DevTools

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Understanding whitespace in HTML is crucial as it affects rendering and can introduce unexpected behavior. Inline elements rely on significant spaces while block elements handle whitespace differently. The behavior of preformatted text and how CSS properties like 'white-space' influence whitespace adds complexity. Prettier and other tools' handling of whitespace shows inherent complications. Additionally, flexbox and inline-block elements bring more nuance. Best practices include avoiding unnecessary whitespace changes and leveraging CSS for consistent results.

HTML Whitespace is Broken

Also there are many more whitespaces available besides <code>&amp;nbsp;</code>. <a href="https://en.wikipedia.org/wiki/Whitespace_character" target="_blank" rel="noopener nofollow">See this list</a>. They are a direct descendant from typesetting and should be used more (like you set spaces after numbers and before units differently).

Adding context-sensivity, for <code>prefers-color-scheme: dark</code> it should be called “blackspace”

Whitespace in html like a spacetime. If you have a lot of spaces in one place - it will collapse to the 1 space. It is because of Einsteins relativity :)