1、margin的相關屬性
margin 屬性是用於在一個宣告中設定四個外邊距的所有屬性的簡寫屬性。沒有繼承性，也就是它的設定的margin值不會自動傳遞到下一級標籤中。
margin後面的引數個數可以是一個，兩個，三個或四個。
一個引數，例如：margin:10px;表示四邊外邊距10畫素；
兩個引數，例如：margin:10px 5px;表示上下外邊距10畫素，左右外邊距5畫素；
三個引數，例如：margin:10px 5px 2px;表示上外邊距10畫素，左右邊距5畫素，下邊距2畫素；
四個引數，例如：margin:10px 5px 2px 1px;表示上外邊距10畫素，右外邊距5畫素，下外邊距2畫素，左外邊距1畫素。

可能的值

2、margin常見問題

2.1、IE6下雙邊距問題

margin雙佈局可以說是IE6下經典的bug之一。產生的條件是：block元素+浮動+margin。

出現問題：

.container{
   margin:20px;
   float:left;
   background-color:red;
}
 

這裡提一下解決方法，使用hack我是不推薦的，使用hack屬於比初學者稍高一點的層次水平。一個頁面，沒有一個hack，但是各個瀏覽器下表現一致，這才是水平。使用display:inline;可以解決這個問題。
而為什麼display:inline可以解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。然後，float:left等浮動屬性可以讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性一樣，支援高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個display inline的元素上。
解決問題（加上display:inline）： 

.container{
   margin:20px;
   float:left;
   background-color:red;
   display:inline;
}

解決問題（去掉float） 

.container{
   margin:20px;
   background-color:red;
}

2.2、margin重疊的問題

css 2.0規範對margin重疊有如下的描述：
i.水平邊距永遠不會重合。
ii.垂直邊距可能在特定的框之間重合：
* 常規流向中兩個或多個塊框相鄰的垂直邊距會重合。結果的邊距寬度是相鄰邊距寬度中較大的值。如果出現負邊距，則在最大的正邊距中減去絕對值最大的負邊距。如果沒有正邊距，則從零中減去絕對值最大的負邊距。
* 在一個浮動框和其它框之間的垂直邊距不重合。//這句話是不夠嚴謹，在IE瀏覽器下確實如此，但是Firefox等瀏覽器下依舊重合。
* “絕對定位的框”與“相對定位的框”邊距不重合。//這句話有待斟酌，我在Firefox等瀏覽器下測試，效果貌似很糟糕的。

margin重疊的問題其實並不是經常遇到，有時即使遇到造成的影響也很小，或是通過其他一些修改就可以輕鬆解決這個問題了。當重疊較多時，沒有找到什麼好的方法解決這個問題，要不IE瀏覽器依舊頑固不化，要麼Firefox表現差強人意。最好的解決margin重疊問題的方法就是了解它，避免它。

每枚硬幣都有正反面，其實margin重疊也是有它的用處的。當垂直方向上有多個模組時，margin重疊正好可以讓上中下都有一個margin值，而且由於margin重疊，所以margin值的表現都是一樣的。例如a,b,c三個垂直方向上的模組都有margin:10px 0; 則最後的表現結果是（如果其上下沒有浮動元素干擾的話）：上，中上，中下，下四處有10畫素的間距。正好完美定位。

2.3、margin不起作用的情況

margin不起作用多出現在Firefox瀏覽器下，最常見的原因就是浮動影響，還有就是margin重疊，或者是padding與margin的重疊。因為margin不起作用，可以使用padding代替，或者再新增一層標籤等方法解決。

3、margin負值的相關應用

圖片與文字預設是居底對齊了。所以當圖片與文字在一起的時候往往都是不對齊的。尤其圖片較小時就更加明顯了，我看到很多人使用vertical-align:middle;對齊。在火狐下效果是不錯，但是IE下，雖然是效果好了些，但還是不夠。如果，圖片是個20畫素*20畫素左右的小圖片，文字也差不多12px大，則使用vertical-align:text-bottom;是不錯的個方法。還有個屢試不爽，相容性不錯的方法就是使用margin負值了。img標籤是個很不錯的標籤，支援margin四個方向的正的和負的定位。一般img標籤打頭的小圖示與文字對齊的話，img{margin:0 3px -3px 0;}可以說是公式版的東西，能實現效果和相容性俱佳的對齊效果。