Whitespace in HTML: Collapse, Preserve, 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 HTML Whitespace Collapsing Algorithm The HTML specification defines a whitespace collapsing algorithm that browsers apply to all text content by default: Tabs, newlines, and carriage returns are converted to spaces Multiple consecutive spaces are collapsed to a single space Spaces at the start and end of a block element are removed This means that in rendered HTML, all of these look identical:…
All articles · theproductguy.in