浏览器处理空格的规则无非就这两个

小郑搞码事 05-29 352

前言：

而今朋友们对“css中空格”大约比较关切，我们都想要学习一些“css中空格”的相关资讯。那么小编在网络上汇集了一些关于“css中空格””的相关内容，希望姐妹们能喜欢，各位老铁们一起来学习一下吧！

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

由于HTML代码的空格通常会被浏览器忽略，所以我们很有必要对浏览器处理空格的一些规则有个详细的认识，这样我们后面才能详述它的解决办法。

一、默认规则

效果是这样的：

由此可此可以知道浏览器的默认处理规则一：文字的前后空格都会忽略，内部连续空格只有自作一个。

原样输出可能是我们这样写代码的本意，要让这段代码原样输出的方法有两个（使用标签/使用表示空格的实体代码）：

方法一：<pre> 小郑搞码 </pre>

方法二： 小郑搞码

二、另一个规则

关于规则部分还有一点，来看一段代码：

效果是：

表示，浏览器对字符的处理不仅限于空格，还有制表符（\t），换行符（\r和\n）。

同样让这段代码换行可能是我们写的本意，让这段代码换行的方法有两个：

方法一：套一个pre标签

方法二：小郑 搞码

最后总结一下：

HTML语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。所以CSS提供了一个属性white-space属性来灵活控制空格。下篇详述。