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