淺談margin負值

margin負值在平常代碼中似乎很少用到過，最近接觸了之後才覺得效果比較讓我驚訝，想著自己健忘還是寫下來，還克服懶癌從印象筆記挪到blog，說不定以後還能給別人看見呢(捂臉逃)。

margin負值的原理

為了方便理解負值margin，我們引入參考線的定義，參考線就是就是margin移動的基準點，而margin的值就是移動的數值。

簡單點說就是：

• top負值就是以包含塊(Containing block) 內容區域的上邊或者上方相連元素 margin 的下邊為參考線;
• left負值就是以包含塊(Containing block) 內容區域的左邊或者左方相連元素 margin 的右邊為參考線;
• right負值就是以元素本身border的右邊為參考線；
• bottom負值就是以元素本身border的下邊為參考線；
  另外關於包含塊的定義具體請參考KB008包含塊(Containing block)。

下面這張圖很直觀地解釋了margin的移動，其中紅色箭頭表示正值時候的移動方向，當margin為負值的時候就反方向移動。

總地來說，就是當margin-top、left為負值的時候與參考線的距離減少，當margin-right、bottom為負值的時候參考線就向左、上面移動。

實際小DEMO

1.當設置margin-top為負值的時候

<div class="box">n <div class="one">one</div>n <div class="two">two</div>n</div>n<style>n.box {n width:200px;n height: 200px;n border: 1px black solid;n}n.box div {n width:100px;n height: 100px;n}n.one {ntbackground:gray;n}n.two {ntbackground:orange;ntmargin-top:-50px;n}n</style>n

結果如下圖

當設置class為two的div的margin-top為-50的時候，它的參考線是div.one的下邊，整個div.two向上移動使得與參考線的距離減少50px。

2.當設置margin-left為負值的時候

<div class="box">n <div class="one">one</div>n <div class="two">two</div>n</div>n<style>n.box {n width:200px;n height: 200px;n border: 1px black solid;n}n.box div {n width:100px;n height: 100px;n}n.one {ntbackground:gray;ntfloat: left;n}n.two {ntbackground:orange;n margin-left: -50px;n float: left;n}n</style>n

結果如下圖

設置float:left使得兩個div浮動起來，然後設置div.two的margin-left為-50px,div.two的參考線就是div.one的右邊，於是div.two左移與參考線距離減少50px。

3.當設置margin-right為負值的時候

<div class="box">n <div class="one">one</div>n <div class="two">two</div>n</div>n<style>n.box {n width:200px;n height: 200px;n border: 1px black solid;n}n.box div {n width:100px;n height: 100px;n}n.one {n background:gray;n float:left;n margin-right:-50px;n}n.two {n background:orange;n float:left;n}n</style>n

結果如下圖

仍然讓兩個div左浮動，設置div.one的margin-right為-50px,這時候的參考線是本身的右邊界，margin-right為負值於是參考線向反方向即左方向移動。

4.當設置margin-bottom為負值的時候

<div class="box">n <div class="one">one</div>n <div class="two">two</div>n</div>n<style>n.box {n width:200px;n height: 200px;n border: 1px black solid;n}n.box div {n width:100px;n height: 100px;n}n.one {n background:gray;n margin-bottom:-50px;n}n.two {n background:orange;n}n</style>n

結果如下圖

當設置div.one的margin-bottom為負值的時候，此時的參考線是自身的下邊界，bottom為負值於是參考線向反方向即向上方移動。

margin負值的實際應用

1. 邊框去重
   有的時候我們做Tab選項卡的時候不希望tab元素和父元素都加上邊框，因此就可以給tab元素添加一像素的margin。詳見我知道你不知道的負Margin。
2. 左右布局
   當用margin負值之後就可以通過改變margin-top等的值成為負值之後不需要使用float就可以實現左右布局

<div class="container">n <div class="left"></div>n <div class="right"></div>n</div>n<style>n.container {ntwidth:400px;ntorder: 1px solid black;ntpadding:10pxn}n.left {ntwidth: 100px;ntheight:400px;ntbackground-color:gray;n}n.right {ntwidth: 300px;ntheight:400px;ntmargin:-400px 0 0 100px;ntbackground-color:orange;n}n</style>n

結果如圖

最後

因為自己做的項目還不多，很多問題其實自己還並沒有遇到過，先總結出來僅供參考，有不對的地方煩請指出改正。