元素外边距合并产生问题

先来个前言

有些时候在写盒子模型中元素之间外边距，往往会在脑海中出现what的神马情况（极端个别情况），今天
有时间总结了一些知识和解决方案，如果大神有别的解决方案，望请留言，让小弟涨涨见识

待解决问题：元素之间外边距的合并/间隔问题

情况如下：

1.水平方向上的外边距合并问题，两元素间距是叠加效果，是两元素外边距之和。

代码，效果如图：

2.垂直方向上兄弟级的外边距合并问题，两元素间距是取最大值，而不是之和

代码，效果如图：

3.垂直方向上父子级的外边距合并问题（称为塌陷），问题描述：即为子元素设置的顶部外边距却作用于父元素的外边距

前面两种情况很是容易记住解决，现在就说说垂直方向上父子级的外边距合并问题（称为塌陷）：

常见这种问题解决的方案有

1.在父元素设置：overflow:hidden/auto;
2.在父元素设置padding-top，它的属性值可设置极小值，如0.1px;
3.在父元素设置border-top,它的属性值也设置为极小值，如0.1px;

生活寄语

爱生活，爱上代码！