margin设置规则与margin塌陷、合并

① margin 设置规则

margin 复合属性，可以设置一个值、两个值、三个值、四个值，规则如下：

margin： 10px;  /*设置 4 个方向的外边距*/
margin: 10px 20px; /*上下  左右*/
margin: 10px 20px 30px;  /*上 左右 下*/
margin: 10px 20px 30px 40px;  /*上 右 下 左*/

外边距值的规则：

1. 如果使用百分比设置长度作为外边距的值，参照父元素内容的宽度。
2. 外边距的值可以负数，也可以设置为 auto。

不同显示的元素，设置外边距的规则：

1. 块级元素、行内块元素可以完美设置各个方向的外边距。
2. 行内元素，可以完美设置左右外边距，上下外边距无法设置。

② margin 塌陷

什么是 margin 塌陷?

第一个子元素的上外边距和最后一个子元素的下外边距，会作用在父元素上，这种现象称之为margin 塌陷。

margin 塌陷只发生在块级元素上。

如何解决 margin 塌陷？

1. 方案一： 给父元素设置边框。
2. 方案二： 给父元素设置内边距。
3. 方案三： 给父元素设置 CSS 属性 overflow:hidden。

③ margin 合并

什么是 margin 合并？

上一个兄弟元素的下外边距会与下一个兄弟元素的上外边距进行合并，二者之间的距离取较大的那个外边距。

margin 合并只发生在块级元素之间。