1. 空间规则

HTML 代码中的空格通常会被浏览器忽略。

◡◡你好◡◡世界◡◡

上面是一行HTML代码，文本的前后各有两个空格。 为了便于识别，这里用半圆形符号◡来表示空格。

浏览器输出如下。

你好世界

可以看到，文本前后的空格会被忽略，里面的连续空格只会算作1。 这是浏览器处理空格的基本规则。

如果您希望空格按原样输出，您可以使用

标签。

◡◡hello◡◡world◡◡

或者，使用 HTML 实体来表示空格。
2. 空格字符
HTML 处理空白的规则，适用于多种字符。 除了普通的空格键之外，还包括制表符（\t）和换行符（\r 和 \n）。
浏览器会自动将这些符号转换为普通的空格键。
你好
世界
上面的代码中，文本中包含换行符，浏览器将其视为空格，输出结果如下。
你好世界
因此，文本内的换行符没有任何效果（除非文本放置在
标签内）。
你好
世界
上面的代码使用
该标签明确表示换行符。
3. CSS 空白属性
HTML语言中的空间处理基本上是直接过滤。 这样的处理过于粗暴，完全忽略了原文中的空白可能是有意义的。
CSS 提供了white-space 属性，可以提供更精确的处理空格的方式。 该属性除了一个常见的（继承自父元素）外，一共有六个值。 下面介绍剩下的五个值。
3.1 空白：
空白属性的默认值为 ，这意味着浏览器正常处理空白。
◡◡◡你好
世界
上面的代码中，文本前面有两个空格，里面有一个长单词和一个换行符。
然后，容器
指定较小的宽度。 为了便于识别，背景颜色设置为红色。
p{
宽度：100px；
：红色的;
显示效果如下图。

正如您所看到的，文本开头的空格被忽略。 由于容器太窄，第一个单词会溢出容器并在其后面换行一个空格。 文本中的换行符会自动转换为空格。
3.2 空白：
设置white-space属性后，不会因为超出容器的宽度而出现换行。
p{
空白：；
显示效果如下图。

所有文本均显示为一行，不换行。
3.3 空白：预
当white-space属性为pre时，遵循
标签加工。
p{
空白：pre；
显示效果如下图。

上面的结果和原文一模一样，所有空格和换行都被保留。
3.4 空白：预换行
当white-space属性为pre-wrap时，基本上遵循
唯一的区别是，当超过容器的宽度时，就会发生换行。
p{
空白：预换行；
显示效果如下图。

前导空格、内部空格和换行符都被保留，并且换行符发生在容器之外。
3.5 空白：行前
当white-space属性为pre-line时，表示保留换行符。 除了换行符会原样输出外，其他都符合white-space:规则。
p{
空白：行前；
显示效果如下图。

除了文本内的换行符不转换为空格外，其他均符合处理规则。 这对于诗歌类型的文本很有用。
4. 参考链接