css margin的相關屬性，問題及應用

用float時發現margin不起作用，圖片和文字並排時老是不能對齊，於是搜到了這篇文章。

--------------------------------------------------------------------------------------------------------------------

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]

本文地址：http://www.zhangxinxu.com/wordpress/?p=48

引言：margin為css中非常常用的一個屬性，其所包含的內容也是很多的。本文主要分三部分對margin做一些分析敘述，包括其屬性，使用過程中會遇到的問題，以及一些進階應用程式等。對於JavaScript與margin的控製表達這裡不敘述。

一、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像素。

margin支援負值，在頁面配置中，您應該大膽的想，大膽的用，可以解決很多問題。這將會在第三部分具體討論。

二、margin常見問題

1.IE6下雙邊距問題

先來看圖再來說話：

margin雙布局可以說是IE6下經典的bug之一。產生的條件是：block元素+浮動+margin。
還記得我自認為會css的那個階段，這個問題我經常碰到，會很熟練的用hack解決這個問題，當時還自以為是，洋洋得意。現在看來，當時的自己嫩的就像個豆芽菜。真正css厲害的人基本上是不會碰到這個bug的，如果您時不時遇到這個bug，說明您的css還有好一段路要走。
我的體會是越少的浮動，就會越少的代碼，會有更靈活的頁面，會有擴充性更強的頁面。這不多說，歸結為到一定水平了，浮動會用的較少。另外，您也會避免使用浮動+margin的用法。所以，越後來越不易遇到這種bug。
這裡提一下解決方案，使用hack我是不推薦的，使用hack屬於比初學者稍高一點的層次水平。一個頁面，沒有一個hack，但是各個瀏覽器下表現一致，這才是水平。使用display:inline;可以解決這個問題。
而為什麼display:inline可以解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。然後，float:left等浮動屬性可以讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性一樣，支援高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個display inline的元素上。

如果您是IE6瀏覽器，可以狠狠地點擊這裡進入demo執行個體頁面瞭解更多資訊

2.margin重疊的問題

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

還是來看圖說話吧：

margin重疊的問題其實並不是經常遇到，有時即使遇到造成的影響也很小，或是通過其他一些修改就可以輕鬆解決這個問題了。我也是今天才好好的研究了下margin重疊的問題，當重疊較多時，沒有找到什麼好的方法解決這個問題，要不IE瀏覽器依舊頑固不化，要麼Firefox表現差強人意。可是自己後來又一想，既然知道會發生margin重疊，寫代碼的時候勢必會注意的，也就不會出現這些重疊的問題的，所以絞盡腦汁想一個比較完美的解決方案是沒有必要的。最好的解決margin重疊問題的方法就是瞭解它，避免它。

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

關於margin重疊，我寫了個demo執行個體頁面，您可以狠狠地單擊這裡擷取更多有用的些資訊，包括些解決重疊問題的方法等。

3.margin不起作用的情況

margin不起作用多出現在Firefox瀏覽器下，最常見的原因就是浮動影響，還是就是margin重疊，或者是padding與margin的重疊。關於這個，我就指說這麼多了。因為margin不起作用，可以使用padding代替，或者再添加一層標籤等方法解決，不太難，沒有多少可說的。

三、margin負值的相關應用

1.頁面上實現css sprite背景定位效果

關於頁面上背景定位效果，可以參見我的文章“IE6下png背景不透明問題的綜合拓展”有關頁面上定位的demo執行個體頁面

2.在流動性布局中的應用

流動性布局又稱調適型配置，也稱為寬度不固定式配置。比如WordPress經典的兩欄式不固定式配置就是使用的margin負值實現的定位，屬於左右margin負值在流動性布局中的應用，有興趣的同學可以稍微看看架構的樣式代碼，會學到些東西的。還有一類兩欄自適應需要用到margin的上下負值，尤其在一欄高度固定，另外一欄高度不定的兩欄或多欄布局中。高度不固定欄和高度固定的欄上下錯開，均無浮動屬性，高度不固定的欄margin-top一個負值，負值的大小就是高度固定欄的高度，這樣，就實現了兩欄在同一水平線上。且寬度自適應，由於沒有浮動，所以不同擔心內部存在clear:both屬性，破壞浮動。這裡沒有例子，講得有點虛，您可以先把這個放一放，因為關於流動性布局（寬度調適型配置）我會好好地寫一篇文章的，到時，有關margin負值在流動性布局中的應用我會好好的講述的。

3.在選項卡等邊框線的處理

顯示的是一種比較常見的選項卡樣式，舊版的迅雷首頁就是這樣子的選項卡。

如何用最簡介最易維護的css代碼寫出這樣的樣式效果呢？

我其實已經在圖上做了點小小的標註，使用margin-top:-1px;解決選項卡下邊框顯示的問題。
關於具體如何編寫實現此效果，建議您狠狠地單擊這裡進入demo執行個體頁面，會有所協助的。

類似的，如果您要用四個div實現5條1像素的左右邊框，就像表格一樣的效果，就可以使用讓每個div都有左右1像素的邊框，然後margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊，這樣就實現了四標籤實現5邊框的效果了。

4.圖片與文字對齊問題

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

 

（本篇完）