實用的margin負值

不管是在介紹前端知識的書籍仍是談論盒模型的文章，margin 都是最重要的屬性之一，然而它的負值用法卻極少被提到。其實 margin 負值是一個至關實用的屬性，能夠被應用於平常前端開發當中的很多場景。

margin 負值初體驗

與正值的 margin 同樣，margin 的負值一樣能夠被用於上下左右四個方向，我把它所起到的效果總結爲：

上和左方的 margin 負值使該元素向上和左方向移動。

下和右方的 margin 負值使該元素下方、右方的元素被拉向該元素。

咱們經過幾個簡單的小例子去理解。傳送門......

在例子當中一個大的正方形包裹着兩個分別是藍色和黃色的正方形，分別對藍色的正方形使用上、下、左、右四個方向的 margin 負值。

結果咱們能夠看到，使用margin-top: -50px 和 margin-left: -50px 的例子，藍色正方形分別向上方和左方移動了50個像素。

而使用 margin-bottom: -50px 和 margin-right: -50px 的例子，位於下方和右方的黃色正方形向藍色正方形方向移動了50個像素，覆蓋了藍色正方形的一部分。

原理淺析

產生上述兩種狀況的差別是因爲 margin 在上、左方和下、右方解析邏輯有所不一樣。這裏引用懌飛博客《由淺入深漫談margin屬性》 中參考線的概念。

產生上述兩種狀況的差別是因爲 margin 在上、左方和下、右方解析邏輯有所不一樣。這裏引用懌飛博客《由淺入深漫談margin屬性》 中參考線的概念。

簡單來講就是上、左方和下、右方參考線的不一樣致使的。

margin 上方負值以包含塊(Containing block) 內容區域的上邊或者上方相連元素 margin 的下邊爲參考線

margin 左方負值以包含塊(Containing block) 內容區域的左邊或者左方相連元素 margin 的右邊爲參考線

margin 下方負值以元素自己 border 的下邊爲參考線

margin 右方負值以元素自己 border 的右邊爲參考線

因此使用 margin 上、左方負值時能夠理解爲與參考線的距離減小，致使元素產生位移；使用使用 margin 下、右方負值時能夠理解爲參考線向上、右方移動。

深刻理解能夠看《由淺入深漫談margin屬性》。另外，關於包含塊( Containing block )。

margin 負值在實際當中的應用

margin 負值雖然不是經常被提起，可是在實際當中已經有至關普遍的應用。如今來看幾個實例。

大衆點評團購城市列表

http://t.dianping.com/citylist

上圖每個城市之間都有一條淺灰色豎線做爲分割符，查看源碼咱們能夠發現它實際上是每一個li元素的左邊界，然而一般使用border來完成相似需求時咱們不但願第一個（或最後一個）li 元素出現border，所以咱們一般會在第一個（或最後一個）li 元素添加 frist-item(或 last-item) 的 class 使他們不顯示，而這裏的城市列表用了一個更加簡單的方法：每個li 元素添加一個像素左方向的 margin 負值。

.list li .cityes li {
    border-left: 1px solid #ccc;
    margin: 17px 0 0 -1px;
    /* 省略其他代碼 */
}

第一個城市的左方 border 就這樣被隱藏了。

segmentfault 首頁tab

http://segmentfault.com/

完成相似的tab效果，咱們須要分別給各個 tab 元素和其父元素添加 border，這個時候會出現雙邊框的狀況。segmentfault 的解決方法是給每個tab元素添加一像素下方的 margin 負值。

另外，爲了相似上一個例子中的城市列表，這裏的元素添加了一個像素的右方的 margin 負值，tab 元素之間不會出現雙邊框的狀況。

.nav-tabs {
    border-bottom: 1px solid #ddd;
    /* 父元素ul */
}
.nav-tabs > li {
    margin-bottom: -1px;
    /* 省略其他代碼 */
}
.nav-tabs-zen > li > a {
    margin-right： 1px;
    border: 1px solid #ddd;
    /* 省略其他代碼 */
}

Bootstrap 網格系統

在 Bootstrap 的網格系統當中，每個使用 col-**-* 類的列元素都應該包裹在 row 類的元素當中。爲了使頁面美觀每一個 col-**-* 的類都設置了左、右15個像素的補白 padding，這樣會致使一個結果，第一個和最後一個元素會離開容器15個像素的距離。爲此，Bootstrap在 row 類當中分別定義了左、右方向15個像素的 margin 負值來抵消第一列和最後一列產生的左右補白。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

左右並排佈局

在作左右並排佈局時候，除了可使用 float 或者 inline-block 以外，還能夠嘗試使用 margin 負值。

直接上例子

最後

利用 margin 負值能夠簡單直接的解決某些咱們平常開發當中遇到的問題，margin 負值還有不少其他的使用實例，這裏不一一敘述，只要平時多看看別人寫的代碼，就會發現 margin 負值的應用其實無處不在。

感謝您的閱讀，有不足之處請在評論爲我指出。

參考

1. 由淺入深漫談margin屬性

2. 我知道你不知道的負Margin

3. Bootstrap框架的網格系統工做原理

本文同步於個人我的博客 http://blog.acwong.org/2014/12/06/negative-margins/