CSS-外边距合并

重要！前言必读！

本章节主要学习的是css的外边距合并，分两种情况一种是相邻兄弟元素的外边距合并和父子元素的外边距合并。

外边距合并

注意！外边距合并是指在垂直方向上，两个相邻的块级元素的外边距（margin）发生重叠，而不是简单地取两者之间的较大值。外边距合并通常发生在父子元素之间或兄弟元素之间，也就是两个垂直的外边距相遇它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的最大值。

---

相邻兄弟元素的外边距合并

注意！

相邻兄弟元素： 如果两个相邻的兄弟元素的外边距都是正数，它们之间的外边距将合并为两者中的较大值，如果其中一个是负数，而另一个是正数，那么它们会相加。

代码图

效果图

---

父子元素的外边距合并

注意！父子元素： 如果父元素的外边距和子元素的外边距相邻，它们之间的外边距会合并，合并后的外边距取两者中的较大值。

代码图

效果图