HTML中空格的实现方法详解

浏览器总是会截短HTML页面中的空格。如果在文本中写10个空格，在显示该页面之前，浏览器会删除它们中的9个。如需在页面中增加空格的数量，需要使用 字符实体。即使是一个空格也尽量不要直接在页面中打，因为在大多数编辑器中空格是透明滴，很容易就被删掉；另外，HTML压缩时候，空格很可能被干掉！

1.1space键直接输入

缺点：

浏览器在解析HTML时，会把连续的空格解析成一个。

1.2使用HTML中的空格占位符

优点：

浏览器在解析HTML时，写几个空格占位符就占几个空格位。

缺点：

空格间距非常大时，必须增加多个占位符，导致页面体积变得非常大。

1.2.1常见空格实体介绍

实体名称简介

 按下space键产生的空格，该空格占据宽度受字体影响明显而强烈。

 等同于字体宽度的一半（如16px字体中就是8px）。其特性：透明；占据的宽

度正好是1/2个中文宽度；基本不受字体影响。

 等同于一个字体宽度（如16px字体中就是16px）。其特性：透明；占据的宽度

正好是1个中文宽度；基本不受字体影响。

 占据的宽度比较小。它是em之六分之一宽。

1.2.2常见空格实体编号介绍

 （实体编号）==普通的英文半角空格

 （实体编号）== == ==no-breakspace（普通的英文半角空格但不换行）

　（实体编号）==中文全角空格（一个中文宽度）

 （实体编号）== ==en空格（半个中文宽度）

 （实体编号）== ==em空格（一个中文宽度）

 （实体编号）==四分之一em空格（四分之一中文宽度）

相比平时的空格（ ），nbsp拥有不间断（non-breaking）特性。即连续的nbsp会在同一行内显示。即使有100个连续的nbsp，浏览器也不会把它们拆成两行。

1.3实例介绍

实现等宽两端对齐效果：

买宝贝：

我的淘宝：

社区：

方法一：使用空格占位符。

方法二：使用em单位，即1em可认为是一个字符宽度。

<span>买<ins class="half-word"></ins>宝<ins class="half-word"></ins>贝：</span><br>
<span>我的淘宝：</span><br>
<span>社<ins class="two-word"></ins>区：</span>

.half-word{
display: inline-block;
width: 0.5em;
}
.two-word{
display: inline-block;
width: 2em;
}

1.4相关CSS属性

1.4.1white-space属性

用于设置文本中空格的处理方式。white-space：pre；时，浏览器会保留文本中的空格和换行。特别适合于在网页中显示程序代码。

例：

<div style="white-space:pre">
int sub(int x,int y){ 
int z; 
if(x&gt;y)z=x-y;
else z = y-x; 
return z; 
}
</div>

说明：使用HTML的<pre>标签也可以达到类似的效果，但<pre>标签有一些不太好的特性，不如使用CSS的white-space属性更方便。

1.4.2letter-spacing属性

用于设置文本中字符之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在字和字之间设置指定长度的空白。

例：

<divstyle="letter-spacing:30px">

欢迎光临！

</div>

说明：若文本中有英文单词，则空白会加在字母之间，而不是单词之间。

1.4.3word-spacing属性

用于设置文本中单词之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在单词和单词之间设置指定长度的空白。

例：

<divstyle="word-spacing:30px">

Happynewyear!

</div>

说明：HTML是以空格来区分单词的，它会把单词间的空白按指定长度显示。

1.4.4text-indent属性

用于设置首行缩进，它的取值可以是一个带单位的长度值，浏览器会在段落的首行开始处设置指定长度的空白。

例：

<divstyle="text-indent:2em">

欢迎光临！

</div>

说明：em是一个相对长度单位，2em表示要缩进两个字的距离。