CSS的空间处理
一、空间规则
浏览器通常会忽略HTML代码中的空格。
上面是一行HTML代码，在文本之前，内部和之后都有两个空格。为了便于识别亚博视讯 ，此处使用半圆形符号表示空间。
浏览器的输出如下。
你好世界
如您所见，文本之前和之后的空格将被忽略，并且内部的连续空格将仅计为一个。这是浏览器处理空间的基本规则。
如果您希望按原样输出空白，则可以使用前导标签。
另一种方法是使用HTML实体而不是表示空格。
二、空格字符
用于处理空格的HTML规则适用于所有类型的字符。除了普通的空格键，它还包含制表符（t）和换行符（r和n）。
浏览器将自动将这些符号转换为普通的空格键。
在上面的代码中，文本包含换行符，浏览器将其视为空格。输出结果如下。
你好世界
因此，文本内的换行符无效（除非文本置于前面的标记内）。
菲尔普斯世界/ p
上面的代码使用br标签清楚地指示换行符。
三、 CSS空格属性
HTML语言的空间处理基本上是直接过滤。这种处理太粗糙了，完全忽略原始文本中的空格可能是有道理的。
CSS提供了一个空白属性，该属性可以提供一种更精确的方式来处理空白。该属性具有六个值，除了通用继承（继承父元素）外亚博账号登录 ，下面依次介绍其他五个值。
blank属性的默认值为normal，这表示浏览器以正常方式处理空格。
在上面的代码中，文本前面有两个空格，其中包含一个长字和一个换行符。
然后，容器p指定相对较小的宽度。为了便于识别div空格代码，将背景色设置为红色。
p {width：100pxbackground：red;}
显示效果如下。
您可以看到文本开头的空格被忽略了。因为容器太窄，所以第一个单词使容器溢出，然后包装在下一个空间中。文本中的换行符会自动转换为空格。
当blank属性为nowrap时div空格代码，不会出现换行符，因为它超出了容器的宽度。
显示效果如下。
所有文本显示为一行，没有换行符。
当blank属性为pre时，它将被视为pre标签。
显示效果如下。
以上结果与原始文本完全相同亚博网站有保障的 ，保留了所有空格和换行符。
当预包装了space属性时，基本上会根据预标签对其进行处理。唯一的区别是，当超出容器的宽度时，将出现新的一行。
p {空白：预包装；}
显示效果如下。
文本开头的空格，内部的空格和换行符被保留，而换行符在容器外部。
当blank属性位于该行之前时，表示保留换行符。除了换行符将按原样输出外，其他所有内容都符合空白：正常规则。
显示效果如下。
除了文本中的换行符不会转换为空格外，其他所有内容均符合常规处理规则。这对于诗歌文本很有用。
四、参考链接
空格在HTML中什么时候重要？作者：帕特里克·布·罗塞特
“空白”，作者莎拉·科普
成都大学（四川省成都市幼儿园幼儿园，成都卫生学校，成都工业大学医学院医学分院）
