创建HTML空格

对于刚开始设计网页的人来说，在HTML中创建空间和元素的物理分离是很难理解的。这是因为超文本标记语言有一个叫做“空格折叠”的属性，无论你在HTML代码中输入1个空格还是100个空格，浏览器都会自动将这些空格折叠为一个空格。这与类似的程序不同微软文字处理软件，它允许文档创建者添加多个空格来分隔该文档的单词和其他元素。这不是网站设计间距的工作方式。

那么，如何在HTML中添加空白呢您已经构建的Web页面？本文研究了一些不同的方法。

空格在HTML与CSS

在HTML中添加空格的首选方法是使用层叠样式表(CSS)．CSS应该用于添加网页的任何视觉方面，因为间距是页面视觉设计特征的一部分，CSS是你想要做的地方。

在CSS中，您可以使用边距或填充属性在元素周围添加空格。此外，text-indent属性会在文本前面增加空间，例如用于段落缩进。

下面是一个如何使用CSS在所有段落前面添加空格的例子。添加以下CSS到您的外部或内部样式表:

p {
indent: 3他们;
｝

在你的文本内HTML的空格

如果你只是想在文本中增加一两个空格，你可以使用不间断空格。这个字符的作用就像一个标准的空格字符，只是它不会在浏览器中折叠。

下面是一个如何在一行文本中添加五个空格的例子:

这个文本里面有五个额外的空格

使用HTML:

这个文本里面有五个额外的空格

您还可以使用
标记来添加额外的换行符。

这个句子的末尾有五个换行符

为什么在HTML中空格是个坏主意

虽然这两个选项都有效——非换行空格元素确实会给你的文本增加间距，换行符会在上面所示的段落下方增加间距——但这不是在你的网页中创建间距的最佳方法。将这些元素添加到HTML中会将视觉信息添加到代码中，而不是将页面结构(HTML)与视觉样式(CSS)分开。最佳实践规定，由于许多原因，这些文件应该是分开的，包括将来易于更新和整体文件大小页面的性能．

如果您使用外部样式表来指定所有样式和间距，那么为整个站点更改这些样式是很容易的，因为您只需要更新那一个样式表。

考虑上面的例子，在句子的末尾有五个
标签。如果您希望在每个段落底部都有这么多的空格，那么您就需要在整个站点的每个段落中添加该HTML代码。这是相当多的额外标记，会使页面膨胀。此外，如果你觉得这个间距太大或太小，而你想稍微改变一下，你就需要编辑整个网站的每一段。不谢谢你!

不要在代码中添加这些空格元素，而是使用CSS。

p {
padding-bottom: 20 px;
｝

这一行CSS会增加页面段落的间距。如果你想在未来改变这个空格，编辑这一行(而不是你的整个网站代码)，你就可以开始了!

现在，如果你需要在你的网站的一部分添加一个空格，使用
标签或一个不间断的空格并不是世界末日，但你需要小心。使用这些内联HTML间距选项可能会导致滑坡。虽然一两个可能不会对站点造成损害，但如果您继续沿着这条路走下去，就会给页面带来问题。最后，你最好转向CSS来处理HTML间距和所有其他网页视觉需求。