When does white space matter in HTML?

Patrick Brosset
Oct 21, 2016 · 10 min read

What is white space?

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

How does CSS process white spaces?

<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?

<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

<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

<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!

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.

Thanks to Julian Descottes

Patrick Brosset

Written by

Firefox DevTools

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade