margin常遇见的问题和解决方法

1.margin-top的传递问题现象：默认情况下给子元素添加了margin-top后，浏览器解析 的时候会把这个上间距也传递给父元素，导致父元素也会下来

如图：

解决方法：A：给 父元素添加border-top

                  B：给父元素添加overflow-hidden；（溢出隐藏）

 2.Margin外间距重叠问题:

现象：默认情况下，两个上下相邻的盒子给一个盒子添加margin-top给另一个盒子添加margin-bottom之后这两个这两个垂直间距会重叠，显示最大数值的间距

如图：本来间距应该叠加150px，却只显示100px

 解决方案：A：给下面的盒子添加父元素且添加声明overflow-hidden

 总结：虽然这种情况不常见但也是面试官会问的常见问题，希望大家下次碰到这种问题知道怎么解决