第 7 章 填充、边框、大纲和页边距 填充、边框、大纲和页边距
本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com
在第 6 章中,我们介绍了元素显示的基础知识。 在本章中,我们将介绍可以用来影响元素框的绘制和分隔的 CSS 属性和值。 其中包括元素周围的填充、边框和边距,以及可能添加的任何轮廓。
基本元素箱
正如 上一章所述,所有文档元素都会生成一个称为元素框的矩形框,它描述了元素在文档布局中所占的空间大小。因此,每个方框都会影响其他元素方框的位置和大小。例如,如果文档中的第一个元素框是一英寸高,那么下一个元素框将从文档顶部下方至少一英寸处开始。如果更改第一个元素框,使其高度为 2 英寸,那么接下来的每个元素框都会向下移动一英寸,而第二个元素框将从文档顶部下方至少 2 英寸处开始。
默认情况下,可视化渲染文档由许多矩形框组成,这些矩形框的分布不会重叠。 如果这些矩形框被手动定位或放置在网格上,它们就会重叠;如果在正常流程元素上使用负边距,就会出现可视化重叠。
要了解如何处理边距、填充和边框,就必须了解框模型,如图 7-1 所示。
图 7-1. CSS 盒模型
图 7-1中的示意图有意省略了大纲,希望我们在讨论大纲后能明白其中的原因。
备注
第 6 章将介绍内容区域的高度和宽度,以及内容区域沿块和内联方向的大小。 如果你觉得本章其余部分由于高度、宽度、块轴和内联轴的讨论方式而有些混乱,请参考该章的详细解释。
衬垫
在元素的内容区域之外,我们可以找到元素的padding,它位于内容和任何边框之间。设置 padding 的最简单方法是使用属性padding。
该属性可接受任何长度值或百分比值。因此,如果你想让所有<h2> 元素的四边都有 2 em 的填充,就很容易做到(见图 7-2):
h2{padding:2em;background-color:silver;}
图 7-2. 为元素添加填充
如图 7-2所示,默认情况下,元素的背景会延伸到填充中。如果背景是透明的,设置 padding 会在元素内容周围创建额外的透明空间,但任何可见的背景都会延伸到 padding 区域(甚至更远,这将在后面的章节中介绍)。
备注
可见的 背景可以通过使用属性background-clip 来防止延伸到填充中(参见第 8 章)。
默认情况下,元素没有填充。例如,传统上,段落之间的分隔只通过边距来实现(稍后您将看到)。另一方面,如果没有填充,元素的边框就会非常接近元素本身的内容。因此,在为元素添加边框时,通常最好也添加一些填充,如图 7-3 所示 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access