CSS-外边距合并问题，相邻块元素的垂直外边距的合并现象，嵌套块元素垂直外边距的合并现象及对应的解决办法

在“标准文档流中” 通过 margin 定义块元素的垂直外边距时，可能会出现外边距的合并现象；合并的情况有两种：一种是相邻块元素垂直外边距的合并，另一种是嵌套块元素垂直外边距的合并

相邻块元素的垂直外边距的合并现象

当上下相邻的两个块元素都设置外边距（margin），如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom + margin-top

实际会取两个值中的较大者作为外边距，这种现象被称为相邻块元素垂直外边距的合并（margin 塌陷现象）

解决办法：可以给其中的一个元素设置垂直方向上的 marign 值来解决这种问题

嵌套块元素垂直外边距的合并现象

对于两个嵌套关系的块元素，如果父元素没有上内边距（padding）或边框（border），父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

需要注意的是如果只给子元素在垂直方向上设置外边距，子级元素和父级元素在垂直方向上都会移动

解决办法：为父元素设置上边框；为父元素设置上内边距；为父元素设置 overflow:hidden 样式属性

也可让元素脱离标准文档流，例如：浮动、固定、绝对定位等