掌握外边距折叠

块级元素的上外边距和下外边距有时会合并（折叠）成一个单独的外边距，其大小是各个外边距中的最大值（或者如果它们相等，则取其中一个），这种行为称为外边距折叠。请注意，浮动元素和绝对定位元素的外边距永远不会折叠。

外边距折叠发生在三种基本情况中：

相邻兄弟元素

相邻兄弟元素的外边距会折叠（除非后一个兄弟元素需要清除浮动）。

父元素与后代元素之间没有内容分隔

父块级元素及其后代元素之间的垂直外边距可能会折叠。这发生在它们之间没有分隔内容时。具体来说，这发生在两种主要情况下：

• 父元素的margin-top与其第一个正常流后代元素的margin-top会折叠，除非父元素有border-top、padding-top、包含任何行内内容（例如文本），或者应用了清除浮动。
• 父元素的margin-bottom与其最后一个正常流后代元素的margin-bottom会折叠，除非父元素定义了height或min-height，有border-bottom，或者有padding-bottom。

在这两种情况下，在父元素上创建一个新的块格式化上下文也将阻止其外边距与其子元素折叠。

空块级元素

如果一个块级元素的margin-top和margin-bottom之间没有边框、内边距、行内内容、height或min-height来分隔，那么它的顶部和底部外边距会折叠。

一些注意事项

• 当上述情况结合时，会发生更复杂的外边距折叠（涉及两个以上的外边距）。
• 这些规则甚至适用于零外边距，因此，无论父元素的外边距是否为零，后代元素的外边距最终都会在父元素之外（根据上述规则）。
• 当涉及负外边距时，折叠后的外边距大小是最大的正外边距和最小的（最负的）负外边距之和。
• 当所有外边距都为负时，折叠后的外边距大小是最小的（最负的）外边距。这适用于相邻元素和嵌套元素。
• 外边距折叠只与垂直方向相关。
• 在display设置为flex或grid的容器中，外边距不会折叠。