本文主要是介绍【CSS in Depth 2 精译_021】3.4 负的外边距 + 3.5 外边距折叠,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
当前内容所在位置(可进入专栏查看其他译好的章节内容)
- 第一章 层叠、优先级与继承(已完结)
- 1.1 层叠
- 1.2 继承
- 1.3 特殊值
- 1.4 简写属性
- 1.5 CSS 渐进式增强技术
- 1.6 本章小结
- 第二章 相对单位(已完结)
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高
- 2.6 自定义属性
- 2.7 本章小结
- 第三章 文档流与盒模型
- 3.1 常规文档流(已完结)
- 3.1.1 内容水平居中
- 3.1.2 逻辑属性
- 3.1.3 用好逻辑属性的简写形式
- 3.2 盒模型(已完结)
- 3.2.1 避免使用魔数
- 3.2.2 调整盒模型
- 3.3.3 全局设置 border-box
- 3.3 元素的高度
- 3.3.1 控制溢出行为
- 3.3.2 百分比高度的备选方案
- 3.3.3 使用 min-height 和 max-height
- 3.4 负的外边距 ✔️
- 3.5 外边距折叠 ✔️
- 3.5.1 文字折叠 ✔️
- 3.5.2 多个外边距折叠 ✔️
- 3.5.3 向容器外折叠 ✔️
- 3.6 容器内的元素间距问题 (精译中 ⏳)
- 3.6.1 当内容改变时的处理 (精译中 ⏳)
- 3.6.2 更通用的解决方案 (精译中 ⏳)
文章目录
- 3.4 负的外边距
- 3.5 外边距折叠
- 3.5.1 文字折叠
- 3.5.2 多个外边距折叠
- 3.5.3 容器外部折叠
3.4 负的外边距
与内边距和边框宽度不同,外边距可以设为负值。负的外边距有一些特殊用途,例如让元素重叠,或者拉伸到比容器还宽。
负外边距的具体行为取决于设置在元素的哪边,如图 3.13 所示。如果作用于左侧或顶部,则负外边距会分别将元素向左、向上移动,导致元素在文档流中与前面的元素重叠。但如果应用于底部,负外边距则不会移动该元素,而是将其下方的元素拉上来;这和直接给正下方的元素一个负的顶部外边距的效果类似。
图 3.13 负外边距的行为特征
尽管负外边距可用于制造多个元素间的重叠效果,但任何复杂的样式追踪起来都会比较麻烦。通常情况下,更推荐使用定位属性 position
来实现该效果;有关定位的知识将在第 6 章中详细介绍。
警告
通过负的外边距实现的元素重叠效果,可能会让包含交互逻辑的元素挪到其他元素后面,从而导致无法正常点击。
根据元素是行内元素还是块级元素,负的右外边距的行为特征也不尽相同。对于行内元素,其行为模式类似于负的下外边距,会将后续内容往左侧拉动,进而与该元素重叠;但在实践中我从未使用过这种方法。
而对于块级元素,负的右外边距则会向右侧拉动元素边缘,使元素扩宽。这可能导致元素边缘超出容器。
此时若将负的左外边距联系起来,元素的左右两边则会延伸到容器外部,致使宽度超过容器宽度。这就是双容器模式(double container pattern,详见 3.1.1 小节内容)的另一种应用,如图 3.14 所示。
图 3.14 负的左右外边距将块级元素扩展到其容器外部示意图
上述效果的样式代码如代码清单 3.9 所示。该方法可用实现图片的“流布溢出(bleed)”效果,令其宽度大于所在文本列。
代码清单 3.9 负的外边距让图片溢出容器
.container {max-width: 1080px;margin-inline: auto;
}
.expanded-child {margin-inline: -2em; /* 致使元素在两个方向扩宽到容器外部 */
}
注意,该方案也可能导致内容超出浏览器视口。因此在实际应用时要注意样式在小屏幕上仍能正常生效。
3.5 外边距折叠
在回到本章的示例页,有没有发现有些外边距不对劲?标题或容器并没有设置过外边距,但却出现了间距(如图 3.15 所示)。这个间距是哪儿来的呢?
图 3.15 外边距折叠导致的间距
当顶部和(或)底部的外边距相邻时,就会重叠为一个单独的外边距。这种现象称为 折叠(collapsing)。图 3.15 中标题栏下方的空白就是外边距折叠导致的。一起来看看它的工作原理。
3.5.1 文字折叠
外边距折叠主要与包含文本的块级元素间的间距有关。默认情况下,段落元素(<p>
)的上下外边距均为 1em
,由用户代理样式表指定。但当两个段落紧挨着排列时,其实际外边距并不会相加得到 2em
,而是会相互折叠,只产生 1em
的间距。
可以在示例页的 <main>
元素中看到该折叠效果。元素 <h2>
内的标题(即“Come join us!”)其底部外边距为 0.83em
,与下方段落的顶部外边距折叠。二者的外边距分布情况如图 3.16 所示。注意观察它们各自的外边距是怎样在页面上占据相同位置的:
图 3.16 标题(左侧)与段落(右侧)勾勒出的外边距示意图
外边距折叠后的实际大小,等于参与折叠的外边距中较大的一方。本例中,标题栏的底部外边距为 19.92px
(字号 24px
× 0.83em
外边距),而段落的顶部外边距为 16px
(字号 16px
× 1em
外边距);二者较大的一方 19.92px
即为实际的外边距大小。
3.5.2 多个外边距折叠
就算两个元素不是相邻的同级元素,外边距也会折叠。例如将段落元素 p 包裹在一个 div 中,如代码清单 3.10 所示,折叠效果也是一样的。在没有任何其他 CSS 干预的情况下,所有相邻的上下外边距都会发生折叠。
代码清单 3.10 用 div 包裹的段落其外边距同样会发生折叠
<main class="main"><h2>Come join us!</h2><div><!-- 即便用另一个 div 包裹起来,段落的外边距仍会折叠 --><p>The Franklin Running club meets at 6:00pmevery Thursday at the town square. Runsare three to five miles, at your own pace.</p></div>
</main>
本例中,三个不同元素的外边距折叠在了一起:<h2>
的底部外边距、以及 <div>
和 <p>
各自的顶部外边距。这些样式属性的计算值分别为 19.92px
、0px
和 16px
。因此元素之间最终的间距(space)仍然是 19.92px
,即三者中的最大值。就算将段落元素嵌套进多个 div
容器中,最终渲染的效果还是不变——所有的外边距都折叠到一块儿了。
总之,任何相邻元素的上下外边距都会折叠到一起。如果在页面中添加一个空的、无样式的 div
元素(即没有指定高度、边框或内边距),其自身的上下外边距也会折叠。
注意
外边距折叠只针对上下外边距;左右外边距不会折叠。(纵向书写模式下情况则刚好相反,此时会折叠的反倒是左右外边距)。
折叠的外边距就像是“个人安全距离”(个人安全距离)。如果站在公交车站的两个人都觉得保持 3 英尺(译注:1 英尺约合 0.3048 米)的距离很舒服,那他们会很乐意间隔 3 英尺,不必非要间隔 6 英尺才会感到舒适。
这就意味着在设置元素外边距时,不用太在意其上方或下方内容的干扰。如果设置标题的底部外边距为 1.5em
,则无论下方元素是 margin-top
为 1em
的 <p>
,还是不带外边距的 <div>
,其间距均为 1.5em
(译注:这里假设 1.5em
的计算值更大)。只有当下方的元素需要更多间距时,折叠后的外边距才会增大。
3.5.3 容器外部折叠
三个连续的外边距折叠可能会让您措手不及。如果容器带了背景样式,元素的外边距在容器外部折叠通常会产生不理想的效果。
这就是导致标题下方出现空隙的原因。页面标题是一个 <h1>
元素,用户代理样式设置了 0.67em
(即 21.44px
)的底部外边距。标题位于无边距的 <header>
中。这两个元素的底部外边距相邻,因此它们会折叠,从而导致标题的底部外边距为 21.44px
。同样的情况也出现在两个元素的顶部外边距上。
这样就有点奇怪了。本希望 <header>
的蓝色背景在纵向上更宽一些,这样标题周围就留出了足够的空间;但外边距未必会在预想的位置发生折叠。还好有很多种方法来避免这种情况发生,并且在之前的页面正文区域其实以及处理过该类问题了;注意观察,“Come join us!”字样上方的外边距并没有折叠到容器外面。这是因为容器设置了内边距 padding
,如果外边距之间有任何内边距样式,它们就不会折叠。
如果为 header
容器添加上下内边距,其内部元素的外边距就不会折叠到容器外;也就是说,<h1>
的外边距和 <header>
的内边距都会为标题文本提供空间,略显冗余。此时最佳的解决方案可能需要完全去掉 h1
元素的外边距,让容器 header
的内边距来指定所需空间。
图 3.17 为标题栏设置内边距,防止外边距折叠
按照代码清单 3.11 更新样式,会发现标题区和正文区之间不再有间隙。这个问题稍后再来解决。
代码清单 3.11 给标题栏加上内边距样式
当容器上方或下方出现意外的空白,或者文本被压到容器的顶部或底部时,罪魁祸首很可能就是外边距折叠。
- 对容器应用
overflow: auto
(或者非visible
的值),可以防止内部元素的外边距与容器外边距发生折叠。通常这种方案副作用最小。 - 在两个外边距间添加边框或内边距,防止外边距折叠。
- 对于容器为内联块(
inline-block
)级元素(其元素是浮动的,详见第 12 章)、或者设置了绝对或固定定位的元素(详见第 6 章),外边距不会在容器外部折叠。 - 使用 Flexbox 弹性盒布局或 Grid 网格布局时,布局内的元素间不会发生外边距折叠(详见第 4 章和第 5 章)。
display
属性为table-cell
的元素没有外边距,因此不会折叠。这也适用于值为table-row
的元素以及大部分表格型的样式值,但table
、table-inline
和table-caption
除外。
上述这些方法很多会改变元素的布局行为,所以除非能产生理想的布局效果,否则不要轻易使用。
这篇关于【CSS in Depth 2 精译_021】3.4 负的外边距 + 3.5 外边距折叠的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!