外边距塌陷是什么？
CSS中的外边距塌陷（Margin Collapse）是一种现象，主要发生在垂直方向上相邻的两个元素的外边距之间。当这种情况发生时，浏览器不会将两个外边距简单相加，而是将其合并为一个较大的外边距。这个合并后的外边距的大小通常是两个发生塌陷的外边距中的较大值。外边距塌陷主要涉及以下几种情况：
-
父子元素间的外边距塌陷：当一个块级元素（子元素）的上外边距与它的父元素的上外边距相邻时，如果父元素没有上边框、上内边距以及没有设置overflow属性为非visible值，这两个外边距会合并，实际表现出来的外边距通常是两者中的较大者。
-
相邻兄弟元素的外边距塌陷：当两个同级的块级元素在垂直方向相邻，它们的上外边距和下外边距也会发生塌陷。具体来说，如果上面元素的下外边距与下面元素的上外边距相邻，浏览器只会渲染一个外边距，其大小等于两个外边距中的较大值。
外边距塌陷不会发生在水平方向的外边距上，仅限于垂直方向。
为了避免外边距塌陷，可以采取以下几种策略：
- 给父元素或其中一个子元素添加一个透明边框（例如：border-top: 1px solid transparent;）。
- 为父元素或子元素设置内边距（padding）而不是外边距。
- 使用overflow属性，为父元素设置overflow: auto;或overflow: hidden;（这会创建一个新的BFC，阻止外边距塌陷）。
- 利用float，将元素浮动起来，使其脱离正常文档流。
- 应用display: flex;或display: grid;给容器，这些现代布局模式自然避免了外边距塌陷的问题。
- 对于相邻兄弟元素，可以在它们之间插入一个空的块级元素，并为其设置一定的高度或透明边框来中断外边距的合并。
1.1 外边距塌陷如何计算
外边距塌陷（Margin Collapse）主要涉及垂直外边距的计算规则，当两个或多个垂直外边距相邻时，它们并不会简单相加，而是按照以下规则进行计算决定最终的外边距值：
- 同级元素间的外边距塌陷：
- 当两个块级元素的上外边距和下外边距相邻时，如果两者都是正值，那么较大的值会被采用。
- 如果一个为正值，另一个为负值，它们将会相加（即相向的外边距会抵消一部分）。
- 若两个外边距都是负值，那么绝对值较大的那个会被采用作为最终的外边距值。
- 父子元素间的外边距塌陷：
-
父元素的上外边距与子元素的上外边距相邻时，通常只保留两者中的最大值作为最终的外边距。如果父元素没有上边框或上内边距，也没有设置overflow属性为非visible，则会发生塌陷。
-
特别地，如果父元素没有上外边距，那么子元素的上外边距会“溢出”到父元素外面，看起来就像是父元素的上外边距。
总结起来，外边距塌陷的计算可以简化为：
- 同号相并取大：如果外边距同为正或同为负，取绝对值较大的那个。
- 异号相加：如果一个正值一个负值，则相加得到的结果作为最终的外边距。
ON THIS PAGE