Margin 塌陷（Collapsing）：父子元素与相邻兄弟元素的垂直外边距合并规则 大家好，今天我们来深入探讨CSS中一个常见但又容易让人困惑的概念——Margin 塌陷（Collapsing）。Margin 塌陷是指在特定情况下，相邻的垂直方向上的外边距会合并成一个单一的外边距，而不是像预期那样叠加。理解Margin 塌陷对于精确控制页面布局至关重要。 一、Margin 塌陷的定义与情景 Margin 塌陷主要发生在以下三种情景中： 父元素与第一个/最后一个子元素： 如果一个父元素没有 border、padding、inline content（例如文本或行内元素）分隔其 margin-top 与第一个子元素的 margin-top，或者其 margin-bottom 与最后一个子元素的 margin-bottom，那么父元素和子元素的相应外边距会发生塌陷。 相邻的兄弟元素： 当两个相邻的兄弟元素在垂直方向上都设置了外边距时，它们之间的外边距会塌陷。 空的块级元素： 如果一个块级元素没有 border、padding、inline content、height、min-heigh …