使用margin的问题与个人的理解

个人对margin的理解

接触html和css的知识有一段时间了，对一些基础的标签都基本上了解，但只是只知其一不知其二，知道如何使用但是对更深的理解却不清楚。
这次遇见了margin的使用时的一些问题：如下面的代码：
css代码：

body{
    padding:0;
    margin:0;
    border:0;
}
.div1{
    width:100px;
    height:100px;
    background:black;   
}
.div2{
    width:50%;
    height:50%;
    margin-top:20px;
    background:red;
}

html代码

<div class = "div1">
    <div class = "div2"></div>
</div>

页面显示的效果如下：

并没有与父级元素上边框相距20个像素的距离，而是与body也就是浏览器的上边框相距了20px,也就是说这个margin没有以父级元素的border为参考点计算margin-top值。
如果给父级元素添加一个padding-top：1px;会出现什么效果呢？我们看看：

得到了想要的效果，如果padding-top设置为0，则又会出现第一幅图的效果，也就是说margin会以父级元素的padding为参考（如果padding不为零），如果为零则会与外层的元素最近的margin为参考点计算（父级元素不算），所谓父级元素不算，就是说给父级元素设置了margin-top值，内部的margin-top并不会和它做参考，将父级元素和内部子元素作为一个整体，它的margin-top会以这些子元素和父级元素的最大的margin-top值为整体的margin-top值。