如果你是一名初创的网页设计师,那么您早期需要了解的许多事情之一就是网页代码中的空白处理网页浏览器的方式。
不幸的是,浏览器处理空白的方式起初不是非常直观,特别是如果您进入HTML并将其与文字处理程序中的空白处理方式进行比较,您可能会更加熟悉这些空白。
在文字处理软件中,您可以在文档中添加大量的间距或制表符,并且该间距将反映在文档内容的显示中。HTML或网页不是这样。因此,了解如何通过Web浏览器处理空白空间是非常重要的。
打印间距
在文字处理软件中,三个主要空白字符是空格,制表符和回车符。它们中的每一个都以一种不同的方式起作用,但是在HTML中,浏览器使它们基本相同。无论您在HTML标记中放置一个空格还是放置100个空格,或者将间距与制表符和回车符进行混合,当页面由浏览器呈现时,所有这些都将被压缩到一个空格。在网页设计术语中,这被称为空白空间崩溃。您不能使用这些典型的间距键在网页中添加空格,因为在浏览器中呈现时,浏览器将多个空格折叠到一个空格中,
为什么有人使用标签?
通常,当人们在文本文档中使用制表符时,由于布局原因使用制表符,或者使文本移动到某个位置或与另一个元素保持一定距离。在网页设计中,您不能使用上述空格字符来实现这些视觉风格或布局需求。
在网页设计中,在代码中使用额外的间距字符将仅仅是为了便于阅读该代码。Web设计人员和开发人员经常使用标签缩进代码,以便他们可以看到哪些元素是其他元素的子元素,但这些缩进不会影响页面本身的可视化布局。对于那些需要的视觉布局更改,您将需要转到CSS(级联样式表)。
使用CSS创建HTML选项卡和间距
今天的网站是分开的结构和风格。页面的结构由HTML处理,而样式由CSS指定。这意味着要创建间距或实现一定的布局,您应该转而使用CSS,而不是为HTML代码添加间距字符。
如果要使用 选项卡来创建文本列,您可以使用与CSS定位的<div>元素来获取列布局。这种定位可以通过CSS浮动,绝对和相对定位,或更新的CSS布局技术(如Flexbox或CSS Grid)完成。
如果您正在布置的数据是表格数据,则可以使用表格根据需要对齐数据。表格经常在网页设计中得到不好的说明,因为它们被滥用为多年的纯布局工具,但如果您的内容包含上述表格数据,表格仍然是完全有效的。
边距,填充和文本缩进
使用CSS创建间距的最常见方法是使用以下CSS样式之一:
- 边际
- 填充
- 文本缩进
例如,您可以使用以下CSS缩进段落的第一行(如下所示):请注意,您的段落具有附加到其上的类属性“first”):
p.first {
text-indent:5em;
}
此段现在缩进约5个字符。
您还可以使用CSS中的边距或填充属性来添加元素的顶部,底部,左侧或右侧(或这些边的组合)的间距。最终,您可以通过转向CSS来实现所需的任何间隔。
移动文本多个空格没有CSS
如果你想要的是让文本被移动离开前一个项目的多个空格,你可以使用不间断的空间。
要使用不间断的空间,只需
在HTML标记中添加所需的次数即可。
例如,如果你想把你的单词五个空格移动,你可以在单词之前添加以下内容。
HTML尊重这些,不会将它们折叠到一个空间。然而, 这被认为是一个非常糟糕的做法,因为它为文档添加额外的HTML标记只是为了实现布局需求。回顾结构和样式的分离,您应该避免添加不间断的空格,以实现所需的布局效果,并应使用CSS边距和填充。