HTML.CSS 父标签无垂直外边距而子标签有垂直外边距引发的问题

今天在写网页时无意中发现两个div嵌套时父标签没有写垂直外边距而子标签写了垂直外边距会发生问题,上网查了很多博客都没有详细的解答,只能自己研究了,最终得出结果,先上代码.

上效果

父标签如果没有垂直外边距父标签的top会取子标签中垂直外边距的最大值,最大值会赋值给父标签的margin-top,父标签的margin-top是相对于body的,所以父标签的top聚力body的top200px,这种情况下正常来说子标签的margin-top和margin-bottom是应该相对于父标签的top和bottom的,但实际上却都是相对于父标签的top,子标签的margin-top:200px是子标签的top相对于父标签的top的聚力,子标签的margin-bottom:100px也是子标签的bottom相对于父标签的top的距离.

 

 

再上一组代码:

 

如果子标签中有垂直外边距父标签中也有垂直外边距父标签的top依然会取子标签中垂直外边距的最大值,但父标签中的垂直外边距依然使用自己的.