使用CSS创建HTML元素的空间和物理分离
创建HTML元素的空间和物理分离对于初期的网页设计师来说可能很难理解。 这是因为HTML有一个称为“空白崩溃”的属性。 无论您在HTML代码中输入1或100，Web浏览器都会自动将这些空间折叠到一个空格上。 这与Microsoft Word这样的程序不同，它允许文档创建者添加多个空格来分隔单词和该文档的其他元素。
这不是网站设计间距的工作原理。
那么，如何在HTML 页面中添加显示在网页上的空格呢？ 本文将探讨一些不同的方法。
使用CSS的HTML空间
在HTML中添加空格的首选方式是使用层叠样式表（CSS） 。 应该使用CSS来添加网页的任何视觉方面，并且由于间距是页面的视觉设计特性的一部分，所以CSS就是你希望完成的地方。
在CSS中，您可以使用边距或填充属性来添加元素周围的空间。 此外，text-indent属性在文本的前面添加空格，例如用于缩进段落。
以下是如何使用CSS在所有段落前添加空格的示例。 将以下CSS添加到外部或内部样式表中：
p {
文本缩进：3em;
}
HTML中的空格：在文本中
如果您只是想在文本中添加额外的一两个空格，则可以使用不间断空格。
这个角色就像一个标准的空间角色一样，只是它不会在浏览器内部崩溃。
以下是如何在一行文本中添加五个空格的示例：
这个文本里面有五个额外的空间
使用HTML：
此文字有＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp; 里面有五个额外的空间
您也可以使用
标签添加额外换行符。
该句末尾有5个换行
符
号。
为什么在HTML中间隔是一个坏主意
尽管这两个选项都起作用 - 非空格的空格元素确实会为您的文字添加空格，并且换行符会在上面显示的段落下添加空格 - 这不是在网页中创建空格的最佳方式。 将这些元素添加到HTML中会将可视信息添加到代码中，而不是从视觉样式（CSS）中分离页面结构（HTML）。 最佳实践表明，由于多种原因，这些应该是分开的，包括将来更新的容易性以及整体文件大小和页面性能。
如果您使用外部样式表来指定所有样式和间距，那么更改整个网站的样式很容易，因为您只需更新该样式表。
考虑上面这个句子的末尾有5个
标签的例子。 如果您希望在每个段落的底部添加一定量的间距，则需要将该HTML代码添加到整个网站的每个段落中。 这是一个相当多的额外的标记，它会膨胀你的网页。
此外，如果您决定这种间距太大或太小，而您希望稍微改变一点，则需要编辑整个网站中的每一段。 不，谢谢！
而不是将这些间距元素添加到您的代码，使用CSS。
p {
padding-bottom：20px;
}
这一行CSS将在您的页面段落下添加空格。 如果您以后想要更改此间距，请编辑这一行（而不是整个网站的代码），然后您就可以开始了！
现在，如果您需要在网站的一部分中添加单个空间，则使用
标记或单个非破坏空间不是世界末日，但您需要小心。
使用这些内联HTML间距选项可能会很滑。 虽然有一两个可能不会伤害您的网站，但如果您继续沿着这条路走下去，您会在网页中引入问题。 最后，您最好转向CSS以获取HTML间距以及所有其他网页视觉需求。