html空白空间,HTML的空格实体

在HTML中，如果连续输入多个空格(直接敲击键盘的space键)，无论输入多少个，最后在浏览器显示时，都只有一个空格。如果要想输入多个空格，这时就需要使用HTML提供的空格实体(space entity)。

空格实体是字符实体的一种，就是表示空格的实体。而所谓实体，在HTML中，用来输入预留字符的字符串就叫字符实体。比如我们不能再HTML文档中输入<>，浏览器会把<>当成一个HTML标签，这时就只能用实体<和>来代替。

本文只关注HTML的空格实体，涉及一点HTML页面显示空格的宽度问题。

在HTML中，一共有4中不同的空格实体：

它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 它是按下space键产生的空格。

在HTML中，如果你用空格键产生此空格，无论输入多少个空格，最后显示只有1个。要连续使用多个此空格实体，才能表示多个空格。

这种空格是我们最常用的，但是这种空额占据的宽度受字体影响明显而强烈。在网页上，不同的字体导致 的宽度不一样，有的时候，这个问题很重要，必须要解决。比如我们在网页上显示源代码代码的时候，就需要使用等宽字体。

它叫“半角空格”，全称是En Space。en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

最后，我们来看一下以上4种HTML空格实体的显示效果：

space test

|人|

|k|

| |

| |

| |

| |

麦新杰使用360浏览器，在极速模式和兼容模式下，默认字体(360浏览器的默认字体是宋体，HTML文档中也没有指定字体)得到的效果是一样的，如下图：

HTML的空格实体

在默认字体情况下， 的宽度和一个因为字母一样。一个中文字的宽度是英文字符宽度的2倍，中文字里面，还有一种空格，叫做全角空格，这种空格，实际上就是一个中文字。