When does white space matter in HTML?

As a web developer, you don’t often spend time thinking about white space, right? I mean, how often do they actually matter?
Well, hopefully with this article, you’ll think of them more often, or at least will know when they do matter and know how to track them down!

What is white space?

White space is any string of text composed only of spaces, tabs or line breaks (to be precise, either CRLF sequences, carriage returns or line feeds).

<!DOCTYPE html>
<h1> Hello World! </h1>
See live at https://captainbrosset.github.io/white-space-article/example1.html.

How does CSS process white spaces?

If most white space characters are ignored, not all of them are. In the previous example the space between Hello and World! still exists when the page is rendered in a browser. So there must be something in the browser engine that decides which white space characters are useful and which aren’t.

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!</span>⇥◦◦</h1>
See live at https://captainbrosset.github.io/white-space-article/example2.html.
<h1>◦◦◦Hello⏎
<span>◦World!</span>⇥◦◦</h1>
<h1>◦◦◦Hello⏎
<span>◦World!</span>◦◦◦</h1>
<h1>◦◦◦Hello◦<span>◦World!</span>◦◦◦</h1>
<h1>◦Hello◦<span>World!</span>◦</h1>
<h1>Hello◦<span>World!</span></h1>
Visitors would see the rendering on the left, not the one on the right. See live at https://captainbrosset.github.io/white-space-article/example2.html.
<h1>Hello◦<span>World!</span></h1>
Highlighting the word Hello shows that the only remaining space in the h1 element is part of this text node.
<body>⏎
⇥<div>◦◦Hello◦◦</div>⏎

◦◦◦<div>◦◦World!◦◦</div>◦◦⏎
</body>
<block>⏎⇥</block>
<block>◦◦Hello◦◦</block>
<block>⏎◦◦◦</block>
<block>◦◦World!◦◦</block>
<block>◦◦⏎</block>
<block></block>
<block>Hello</block>
<block></block>
<block>World!</block>
<block></block>
Two block elements laid out on top of each other, with all the white space ignored. See live at https://captainbrosset.github.io/white-space-article/example3.html.

Why don’t we see white spaces in devtools?

We’ve seen in the previous section how white space was often ignored when rendering the layout, but we’ve said that it still played a role in the DOM tree. Text nodes are still being created in the DOM tree of the page, so the following code:

<body>⏎
⇥<div>◦◦Hello◦◦</div>⏎

◦◦◦<div>◦◦World!◦◦</div>◦◦⏎
</body>
element node: <body>
∟ text node: ⏎⇥
∟ element node: div
∟ text node: ◦◦Hello◦◦
∟ text node: ⏎⏎◦◦◦
∟ element node: div
∟ text node: ◦◦World!◦◦
∟ text node: ◦◦⏎
Text nodes are ignored in Firefox
And also ignored in Chrome

Spaces between inline and inline-block elements

In fact, we’ve seen this already with the very first example in this article, when we described how white space was processed inside inline formatting contexts.

<style>
.people-list { list-style-type: none; margin: 0; padding: 0; }
.people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; }
</style>
<ul class="people-list">⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
</ul>
See live at https://captainbrosset.github.io/white-space-article/example4.html.

Controlling white space rendering

Using the CSS white-space property, you can control how white space characters are processed when a given inline formatting context is laid out.

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!</span>⇥◦◦</h1>
h1 { white-space: pre; }
Using Firefox DevTools to highlight text nodes, you can see exactly what space is occupied by the “Hello” text node. See live at https://captainbrosset.github.io/white-space-article/example5.html.
<span>◦World!</span>

Firefox DevTools to the rescue!

Starting with version 52 of Firefox, the inspector panel shows white space text nodes when they do have an impact on the layout and also highlights them in the page.

White space text nodes displayed in the inspector and highlighted in the page. See live at https://captainbrosset.github.io/white-space-article/example4.html.
Deleting white space text nodes. See live at https://captainbrosset.github.io/white-space-article/example4.html.

🛠 DevTools engineer @Microsoft working on Edge, previously @Mozilla . Opinions my own. he/him. https://patrickbrosset.com

🛠 DevTools engineer @Microsoft working on Edge, previously @Mozilla . Opinions my own. he/him. https://patrickbrosset.com