怎麼了解負值的margin

假設我們有一個div如下：

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

其css如下：

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

.d2
{
    width:px;
    height:px;
    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 來講也是一樣的。以同樣的思路去了解就可以了。