看看HTML中的空白是如何被浏览器处理的
如果你是一个开始的网页设计师，你很早就必须了解的许多事情之一就是网站代码中的空白处理由网页浏览器处理的方式。
不幸的是，浏览器处理空白的方式一开始并不是非常直观，特别是如果您使用HTML并将其与文字处理程序中的空白处理方式进行比较，您可能会更熟悉这些空白处理程序。
在文字处理软件中，您可以在文档中添加大量间距或制表符，并且间距将反映在文档内容的显示中。 HTML或网页都不是这种情况。 因此，了解网络浏览器如何处理空白空间是非常重要的。
打印间距
在文字处理软件中，三个主要的空白字符是空格，制表符和回车符。 其中的每一种都以不同的方式进行操作，但在HTML中，浏览器呈现的都基本相同。 无论您在HTML标记中放置一个空格还是100个空格，还是将间距与制表符和回车符合在一起，当浏览器呈现页面时，所有这些空间都会缩减为一个空格。 在网页设计术语中，这被称为空白崩溃。 您不能使用这些典型的间距键在网页中添加空格，因为在浏览器中渲染时，浏览器会将多个空格向下折叠为只有一个空格，
为什么有人使用标签？
通常，当人们在文本文档中使用制表符时，他们出于布局的原因使用它们，或者使文本移动到某个地方或与另一个元素保持一定的距离。 在网页设计中，您不能使用上述空格字符来实现这些视觉样式或布局需求。
在网页设计中，在代码中使用额外的空格字符纯粹是为了便于阅读代码。 网页设计人员和开发人员经常使用制表符来缩进代码，以便他们可以看到哪些元素是其他元素的子元素 - 但这些缩进不会影响页面本身的可视布局。 对于那些需要视觉布局更改的人，您需要转向CSS（级联样式表）。
使用CSS创建HTML选项卡和间距
今天的网站是建立在结构和风格分离的基础上的。 一个页面的结构由HTML处理，而样式由CSS指定。 这意味着要创建间距或实现特定的布局，您应该转向CSS，而不是试图简单地向HTML代码添加空格字符。
如果您尝试使用制表符来创建文本列，则可以使用使用CSS定位的
如果您正在绘制的数据是表格数据，则可以使用表格来根据需要调整数据。 表格经常在网页设计中受到谴责，因为它们被滥用为纯粹的布局工具多年，但如果您的内容包含上述表格数据，表格仍然是完全有效的。
边距，填充和文本缩进
使用CSS创建间距的最常用方法是使用以下CSS样式之一：
- 余量
- 填充
- 文本缩进
例如，您可以使用以下CSS缩进像选项卡这样的段落的第一行（请注意，这里假定您的段落的类属性为“first”）：
p.first {
文字缩进：5em;
}
这一段现在缩进大约5个字符。
您还可以在CSS中使用边距或填充属性将间距添加到元素的顶部，底部，左侧或右侧（或这些边的组合）。 最终，您可以通过转向CSS来实现任何类型的间距。
移动文本多个空间没有CSS
如果您只想将文本从前一个项目中移出多个空格，则可以使用非中断空格。
要使用不间断空格，只需添加＆nbsp; 尽可能多地在HTML标记中使用它。
例如，如果您想将单词移动五个空格，则可以在单词前添加以下内容。
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;HTML尊重这些并不会将它们折叠到一个空间。 但是， 这被认为是一种非常糟糕的做法，因为它只是为了实现布局需要而向文档添加额外的HTML标记。 回顾一下结构和样式的分离，您应该避免添加非分隔空间来实现所需的布局效果，而应该使用CSS边距和填充。