在介绍 HTML 空格之前，我们先来看一个简单的例子。
示例 1：HTML 空白折叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>I love HTML</div>
</body>
</html>页面效果如下图所示。
分析：
从这个例子可以看出，在 HTML 代码中，无论你按多少次空格键，浏览器永远只显示 “一个空格”。这是因为 HTML 有一个 “空白折叠” 特性。为了在网页中精准地控制空格，我们需要借助网页特殊符号来控制。
最常用的空格：
在 HTML 中，空格是一种特殊符号，需要使用 HTML 提供的特殊代码才能显示出来。
语法：
说明：
空格是一种特殊符号，因为它也是以 “&” 开头，然后以 “;” 结尾。实际上，“ ” 是 “Non-Breaking Space（不换行空格）” 的缩写。
提示: 在前端界也被叫做 “牛逼SP（nbsp）”，这样去记忆就很简单了。
示例 2： 用于添加空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>I love HTML</div>
</body>
</html>页面效果如下图所示。
分析：
一个 就相当于一个英文字母的间隔，写多少个就显示多少个空格。
示例 3： 用于防止换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="font-family: monospace; font-size: 32px; width: 12ch; border: 2px solid #ccc; padding: 16px;">
Distance: 10 km
</div>
</body>
</html>页面效果如下图所示。
分析：
从页面效果可以看出，“10” 在行末，而 “km” 掉到下一行，这种用户体验是非常差的。我们更希望的是，“10 km” 放到同一行中。如果想要达到这样的效果，就可以使用 来实现，也就是改为：
Distance: 10 km实际上， 本职工作其实不是为了 “凑距离”，而是为了把两个词 “粘” 在一起。
适合中文的空格： 
很多新手会发现 的宽度很小（大约是 1/3 或 1/4 个汉字），用它来对齐汉字是非常痛苦的。此时我们可以考虑使用以下 2 种特殊符号：
 ：全角空格。宽度等于 1 个中文字符（在大多数本文字体下）。 ：半角空格。宽度等于 1/2 个中文字符。
示例 4：中文使用  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>爱莲说</h3>
<p>   水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>   予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>页面效果如下图所示。
分析：
在中文排版中，首行一般需要缩进 2 个汉字的距离。在大多数情况下，一个   就是一个汉字的距离。
提示: 等学了 CSS 之后，我们应该考虑使用 text-indent 属性来实现首行缩进。
