Whitespace in HTML: How Browsers Collapse, Preserve, and Display Spaces
How HTML handles whitespace: collapsing rules, non-breaking spaces, pre/code elements, and CSS white-space property. With rendering examples.
Published:
Tags: text, developer-tools, html
Whitespace in HTML: How Browsers Collapse and Preserve Spaces HTML has its own unusual relationship with whitespace. Unlike a plain text document where every space is significant, HTML browsers apply aggressive whitespace collapsing rules that often surprise developers. Understanding these rules prevents layout bugs, helps you write cleaner HTML, and explains why some CSS properties exist. The CSS Property CSS's property controls how whitespace in HTML content is handled: | Value | Spaces Collapsed | Lines Wrapped | Newlines Preserved | |-------|-----------------|--------------|-------------------| | (default) | Yes | Yes | No | | | Yes | No | No | | | No | No | Yes | | | No | Yes | Yes | | | Yes | Yes | Yes | | | No | Yes | Yes | — Behave Like With , all spaces, tabs, and newlines in the…
All articles · theproductguy.in