css-負margin總結

這篇文章是從原博客轉載過來的，是2013年寫的，有些不對的地方請指出。

原文地址

博客地址 , 歡迎訂閱

---

這是一篇我本身關於負margin的理解，今天由於作項目用到了負margin，幾經找資料，終於搞懂了，就趕忙記下來，省得忘記了！

• margin爲正時，top、left屬性是以content上（左）或垂直上方相連元素margin的下（右）邊爲參考線垂直向下（右）位移。

• margin爲負時，right、bottom屬性是元素自己的border右（下）邊爲參考線水平向右（下）位移。

總結

1. 盒子最後的顯示大小等於盒子的border+padding+正margin，而負margin不會影響其大小。

2. margin爲負且盒子static時：

   • 若屬性爲top、left，盒子將被拉進指定的方向;

   • 若屬性爲bottom、right,將後續的元素拖拉進來，覆蓋原本的元素。

   • 若width沒有被設置，設定負margin-left/right會將元素拖向對應的方向，並增長寬度，此時的margin的做用就像padding同樣

選項卡demo

怎麼樣實現上面菜單欄的選中狀態下沒有下邊框的效果？
通常的思路是每一個菜單欄設置邊框，選中的狀態沒有下邊框

其實還能夠這樣，邊框不是上面菜單欄的，而是下面內容塊的：

明白了把，因此只要給菜單欄設置margin-bottom:-1px就可讓下面的內容塊上移1px，恰好讓菜單欄的背景色蓋住那個1px的邊框。
若是選中狀態沒有背景色，就悲劇了：

請看 demo

如今看這個例子沒有明顯展現出負margin的能力，再看下面的

負margin加寬元素

再看一個width沒有設置，經過負margin加寬的元素的佈局例子，這是很常見的例子，若是不用負margin，就會很麻煩呢
demo

聖盃佈局

由於BFC有這個特性：

元素在設定width時，添加border、padding、margin會致使元素變寬；可是在沒有設定width時，元素會自動填滿父元素，添加padding、border、margin會使元素變窄，減小量等於他們三個之和。

demo

負margin實現兩列等高佈局

demo

參考文章

負值之美

以上是網上資料總結，個人總結就一句話：left、top不論正負本身動，right、bottom不論正負別的元素動！正的向外，負的向內！考慮問題的時候還要考慮到盒子的特性問題！！

PS:遇到問題只要先想一想什麼是margin，margin的做用是什麼，則負margin的工做原理則迎刃而解！