淺談負margin

一般來講margin爲正值時，咱們很清楚其佈局形式，即在border邊界線處再往外擴展指定長度。可margin爲負又表示什麼呢，表示始於border邊界線處並向內擴展指定長度，這樣，下一個文檔流對象即是從margin邊界線處起，顯示出來。

元素的實際寬度 = 內容部分的width + padding + margin

因此：內容部分的width = 元素實際寬度 - margin - padding

沒有設置width的元素的實際寬度值是由父元素的寬度，而後減去margin，因爲margin是負值，因此就會獲得實際上比父元素更寬的值。而設置了width的元素就不須要計算寬度了，這時候margin只會影響起始的位置。 

實例分析

    *{
        margin:0; 
        padding:0;
    }

    .wrap{
        width:400px; 
        border:5px solid #aaa;
    }

    .example{
        width:200px; 
        height:200px; 
        background:#CCCCFF;
    }

    .normal{
        width:200px; 
        height:200px; 
        background:#CCE8CF;
    }

    .example{
        margin:-10px 20px -30px 40px;
    }

<div class="wrap">
      <div class="example">example元素：margin參考線舉例說明文字，請查看此元素因爲margin的變化所移動的位移量。</div>
      <div class="normal">一個普通的Box</div>
</div>

 

分析：

margin:-10px(top) 20px(right) -30px(bottom) 40px(left);

上-10px和左40px將之外元素爲參考，所謂外元素就是本元素的邊界元素（元素的緊鄰元素）。example元素上邊和左邊的邊界元素即爲wrap父元素，wrap父元素爲基準點，example的margin-top爲-10px，若是爲+10px，example元素相對於wrap父元素邊緣爲基準，那麼example元素會同wrap父元素10px產生間隙邊距，那麼反過來，margin-tip:-10px;仍是與wrap父元素邊緣爲基準，反過來向上推10px的距離位置。example元素的margin-left爲40px，這裏就按照正常邏輯相隔40px邊距，同理若是爲-40px，那麼就是反方向向左推動40px的距離位置。

再來看example元素的margin-right和margin-bottom，由上文得知這倆個值是以元素自己爲參考。什麼叫以元素自己爲參考呢，確切含義是指以自身爲參考來影響周圍元素的位置（實質即爲影響下邊和右邊相鄰元素的參考線）。這裏的margin-bottom爲-30px，對於其自身位置沒有任何變化，可是對於其下方元素normal元素產生了極大的影響，由於normal元素的上邊界元素即爲example元素，根據example元素邊界來斷定自身位置，想象下若是example元素margin-bottom爲+30px，那麼example元素將隔開下方的normal元素，反之爲-30px，下方normal元素因爲example參考線內凹，致使了normal元素自個兒身不禁己的被「提」了上去了。這就是以自身爲參考影響周圍元素位置的含義。

這裏梳理一下規律，當margin四個值都爲正數值的話，那麼margin按照正常邏輯同周圍元素產生邊距。當元素margin的top和left是負值時會引發元素的向上或向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素的參考線。