說(shuō)到margin大家用到的最多的還是它的正值。

比如：margin-right: 10px，就是外緣右邊邊留白10像素

但是負(fù)值就很多人不能理解了，比如margin-left: -360px，這是啥意思呢？

老馬也查了一些資料，下面就講下怎么理解margin負(fù)值。

margin負(fù)值的原理

為了方便理解負(fù)值margin，我們引入?yún)⒖季€的定義，參考線就是margin移動(dòng)的基準(zhǔn)點(diǎn)，而margin的值就是移動(dòng)的數(shù)值。
margin的參考線有兩類，一類是top、left，它們以外元素作為參考線，另一類是right、bottom，它們以自身作為參考線。
簡(jiǎn)單點(diǎn)說(shuō)就是：

top負(fù)值就是以包含塊(Containing block) 內(nèi)容區(qū)域的上邊或者上方相連元素 margin 的下邊為參考線;
left負(fù)值就是以包含塊(Containing block) 內(nèi)容區(qū)域的左邊或者左方相連元素 margin 的右邊為參考線;
right負(fù)值就是以元素本身border的右邊為參考線；
bottom負(fù)值就是以元素本身border的下邊為參考線；

下面這張圖很直觀地解釋了margin的移動(dòng)，其中紅色箭頭表示正值時(shí)候的移動(dòng)方向，當(dāng)margin為負(fù)值的時(shí)候就反方向移動(dòng)。黑色實(shí)線可視為初始基準(zhǔn)點(diǎn)。

就是當(dāng)margin-top、left為負(fù)值的時(shí)候與參考線的距離減少，當(dāng)margin-right、bottom為負(fù)值的時(shí)候參考線就向左、上面移動(dòng)。

首先演示一下 margin-top 負(fù)值：

HTML代碼：

<div class=”wrapper”>
<div class=”box1″></div>
<div class=”box2″></div>
</div>

CSS代碼：

.wrapper{
margin: 20px;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
/* margin-top: -50px; */
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
}

頁(yè)面效果為：

去掉注釋，margin-top: -50px生效時(shí)，頁(yè)面效果為：

如果將box1中的 margin-top: -50px 改為 margin-bottom: -50px 時(shí)頁(yè)面效果為：

看到這里，是不是差不多能明白了？

繼續(xù)，HTML代碼不變，修改CSS代碼：

.wrapper{
margin: 20px;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box1{
float: left;
width: 100px;
height: 100px;
/* margin-left: -50px; */
background-color: red;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: orange;
}

頁(yè)面效果為：

去掉注釋，margin-left: -50px生效時(shí)，頁(yè)面效果為：

將box1中的 margin-left: -50px 修改為 margin-right: -50px 時(shí)頁(yè)面效果：

總地來(lái)說(shuō)，margin負(fù)值就相當(dāng)于從相應(yīng)的邊減少對(duì)應(yīng)值的寬/高。（例如：margin-top：-50px ，就相當(dāng)于從box1的上邊開始減少50px的高度）
由此得出結(jié)論：

margin-top 負(fù)值，元素向上移動(dòng)
margin-bottom 負(fù)值，下方元素向上移動(dòng)
margin-left 負(fù)值，元素向左移動(dòng)
margin-right 負(fù)值，右側(cè)元素向左移動(dòng)

更多相關(guān)：

https://z197.com/blog/margin-left-negative-number-effect.html