CSS 播客 - 013:间距
假设您有一个由三个框组成,这些框堆叠在一起的集合,并且您希望它们之间留有空间。您能想到在 CSS 中通过几种方式来实现这一点?
margin
属性或许可以提供您所需的内容,但也可能会添加您不想要的额外间距。例如,如何仅定位上述各元素之间的空间?
在这种情况下,像 gap
之类的代码可能更合适。您可以通过多种方式调整界面中的间距,每种方式都有自己的优势和注意事项。
HTML 间距
HTML 本身提供了一些设置空间元素的方法。
借助 <br>
和 <hr>
元素,您可以在块方向上为元素设置间距。如果您使用的是基于拉丁语的语言,这些方向即为从上到下。
如果您使用 <br>
元素,它会创建一个换行符,就好比您在文字处理器中按 Enter 键。
<hr>
会创建一条两侧有空格的水平线,称为 margin
。
除了使用 HTML 元素,HTML 实体也可以创建空间。HTML 实体是浏览器使用字符实体替换的预留字符串。例如,如果您在 HTML 文件中输入 ©
,系统会将其转换为 © 字符。
实体会转换为不间断空格字符,以提供内嵌空格。但要小心,这个角色的非破坏性方面会将这两个元素拼接在一起,这可能会导致出现奇怪的行为。
外边距
如果要在元素外部增加空间,可以使用 margin
属性。外边距就像在元素周围添加一个缓冲一样。margin
属性是 margin-top
、margin-right
、margin-bottom
和 margin-left
的简写形式。
margin
简写形式以特定顺序应用属性:上、右、下、左。但记不住这么多消息:TRouBLe。
margin
简写形式也可以与一个、两个或三个值结合使用。通过添加第四个值,您可以设置各个面。具体应用方式如下:
- 所有面都会应用一个值。(
margin: 20px
). - 两个值:第一个值将应用于顶部和底部,第二个值将应用于左侧和右侧。(
margin: 20px 40px
) - 三个值:第一个值为
top
,第二个值为left
和right
,第三个值为bottom
。(margin: 20px 40px 30px
).
可以使用长度、百分比或自动值来定义外边距,例如 1em
或 20%
。如果您使用百分比,该值将根据元素所在块的宽度计算得出。
这意味着,如果元素所在块的宽度为 250px
,元素的 margin
值为 20%
,则元素每边的计算外边距为 50px
。
您还可以为外边距使用 auto
值。
对于大小受限的块级元素,auto
外边距会在其应用方向上占用可用空间。Flexbox 模块中的这个模块就是一个很好的例子,在该模块中,项会互相推开。
auto
外边距的另一个典型示例是具有最大宽度的水平居中封装容器。这种封装容器通常用于在网站上创建一致的中心列。
.wrapper {
max-width: 400px;
margin: 0 auto;
}
在此示例中,从顶部和底部(块)两侧移除了外边距,auto
共享左侧和右侧(内嵌)之间的空间。
负利润率
负值也可用于外边距。 系统不会在相邻的同级元素之间添加空间,而是减少它们之间的空间。如果您声明的负值大于可用空间,可能会导致元素重叠。
利润率收起
外边距折叠是一个棘手的概念,但在构建接口时经常会遇到这个问题。假设您有两个元素:标题和段落上都有垂直外边距:
<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
乍一看,您也许以为段落与标题之间以 5em
为间隔,因为 2rem
和 3rem
的总和计算为 5rem
。不过,由于垂直外边距会收起,因此该空间实际上为 3rem
。
外边距收起的工作原理是,选择两个相邻元素的最大值,并在相邻的两侧设置垂直外边距。h1
的下外边距与 p
的顶部交汇,因此选择 h1
的下外边距和 p
的上外边距的最大值。如果 h1
的下外边距为 3.5rem
,则两者之间的间距将为 3.5rem
,因为它大于 3rem
。只有块外边距会收起,不会内嵌(水平)外边距。
外边距收起也有助于处理空元素。
如果您的某个段落的上外边距和下外边距为 20px
,则该段落将仅创建 20px
的空间,而不是 40px
。
不过,如果此元素内部添加了任何内容(包括 padding
),其外边距将不再自行收起,并会被视为任何包含内容的框。
检查您的掌握程度
考查您对利润数据融合相关知识的掌握情况
如果两个相互堆叠的元素都有 20px 的上外边距和 30px 的下外边距,那么它们之间会有多少空间?
防止外边距合拢
如果您使用 position: absolute
将某个元素设置为绝对定位,则外边距将不再收起。如果您还使用 float
属性,则外边距也不会折叠。
如果您的某个元素在采用块外边距的两个元素之间没有外边距,那么外边距也不会折叠,因为这两个有块外边距的元素不再是相邻的同级元素:它们只是同级。
在布局课程中,您已了解 Flexbox 容器和网格容器与块容器非常相似,但处理其子元素的方式截然不同。外边距收起的情况也是如此。
如果我们使用本课程中的原始示例,并通过列方向应用 Flexbox,则外边距会合并,而不是收起。 这可以通过布局工作实现可预测性,这正是 Flexbox 和网格容器的设计目标。
外边距和外边距折叠可能难以理解,但详细了解它们的工作原理非常有用,因此强烈建议您使用这篇详细的解释器。
内边距
padding
属性会在盒子的内部内部创建空间,而不是像margin
那样在盒子的外侧留出空间,而是采取隔热措施。
padding
也可能影响元素的总体尺寸,具体取决于您使用的框模型(我们在框模型课程中对此进行了介绍)。
padding
属性是 padding-top
、padding-right
、padding-bottom
和 padding-left
的简写形式。与 margin
一样,padding
也具有逻辑属性:padding-block-start
、padding-inline-end
、padding-block-end
和 padding-inline-start
。
Positioning
同样,layout 模块中也对此进行了介绍,如果您为 position
设置的值是 static
以外的任何值,则可以使用 top
、right
、bottom
和 left
属性来设置元素间距。这些方向值的行为方式存在一些差异:
- 具有
position: relative
的元素将保持其在文档流中的位置,即使您设置了这些值也是如此。它们还会以元素的位置为参照物。 - 具有
position: absolute
的元素将基于相对父项的位置建立方向值。 - 具有
position: fixed
的元素将基于视口来确定方向值。 - 具有
position: sticky
的元素仅在处于停靠/卡住状态时才应用方向值。
在逻辑属性模块中,您将了解 inset-block
和 inset-inline
属性,这两个属性可用于设置遵循写入模式的方向值。
这两个属性都是组合了 start
和 end
值的简写形式,因此可以接受为 start
和 end
设置的一个值或两个单独的值。
网格和 Flexbox
最后,在网格和 Flexbox 中,您可以使用 gap
属性在子元素之间创建空间。
gap
属性是 row-gap
和 column-gap
的简写形式,它接受一个或两个值,可以是长度或百分比。您也可以使用 unset
、initial
和 inherit
等关键字。如果您只定义一个值,则相同的 gap
将同时应用于行和列,但如果您同时定义了这两个值,则第一个值为 row-gap
,第二个值为 column-gap
。
借助 Flexbox 和网格,您还可以使用其分布和对齐功能创建空间,网格模块和 Flexbox 模块对此进行了介绍。
创建一致的间距
选择并坚持采用这种策略是个不错的选择,可以帮助您创建具有良好流程和节奏的一致界面。为实现这一目标,一种好方法是使用一致的间距度量。
例如,您可以承诺使用 20px
作为元素之间所有间隙(称为边线)的一致衡量方式,以使所有布局的外观和风格保持一致。您还可以决定使用 1em
作为数据流内容之间的垂直间距,这样便可根据元素的 font-size
实现一致的间距。无论您选择哪种类型,都应该将这些值保存为变量(或 CSS 自定义属性),以便对这些值进行标记化,并简化一致性。
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
使用此类自定义属性时,您只需定义一次,然后便可在整个 CSS 中使用它们。当更新值时,无论是在元素本地更新还是全局更新,值将通过级联传递并反映更新后的值。
检查您的掌握程度
考考您对空格知识的掌握情况
在以下情况下,可以放心使用 HTML 来设置间距...
要在框内创建空间,请使用...
如要在框外创建空间,请使用...
要在方框之间留出空间,请使用...