怎么理解负值的margin

假设我们有一个div如下：

<div class="d1">Div1</div>
<div class="d2">Div2</div>

其css如下：

.d1
{
    width:100px;
    height:100px;
    background-color:#1ff;
    margin-bottom:50px;
}

.d2
{
    width:100px;
    height:100px;
    background-color:#f1f;
}

当我们设定d1其margin-bottom为正值（50px)时，可以想象成d1向外扩张一块空白的区域（其它内容不能占据该区域），区域高度为50px，而其内容(块的大小100px*100px)保持不变。例子如下：
https://jsbin.com/bekeju/edit?html,css,output

而当我们设定d1其margin-bottom为负值（-50px)时，可以想象成d1向内（负方向）收缩一块区域（其它内容可以占据该收缩的区域），区域高度为50px，而其内容保持不变。例子如下：
https://jsbin.com/cozeju/edit?html,css,output

对于margin-left, margin-right, margin-top 来讲也是一样的。以同样的思路去理解就可以了。