外边距问题

嵌套块级元素垂直外边距塌陷

描述：当父元素没有padding、border时，子元素与父元素直接相邻，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并，取两个值中的较大值。负值取绝对值较大的值。

解决方法：1、给父元素设置边框或内填充（慎用）

2、给父元素设置overflow：hidden；（溢出隐藏）改变渲染规则 -BFC

结构关系：相邻元素的垂直外边距合并

描述：当两个块级兄弟元素垂直方向上的margin值直接相遇时会发生合并。最终结果取较大值。 负值取绝对值较大的值。

解决方法：

1、尽量只定义其中一个的margin值

给其中一个盒子加父元素：overflow：hidden;改变渲染规则