margin的位移方向是指margin數(shù)值為正值時候的情形，如果是負值則位移方向相反。

　　如上圖所示：黃色子元素盒的margin-top，margin-left為負值時，如-10px，則黃色子元素盒向上（向左）移動，越過相鄰元素10px；黃色子元素盒的margin-right，margin-bottom為負值時，如-10px，黃色子元素盒不動，它右邊（下邊）的相鄰元素和左移（上移）10px，垂直外邊距合并問題垂直外邊距合并問題常見于第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距原因：一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內(nèi)部文檔流中的第一個子元素的上邊距重疊。父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己“領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個有效的 border或者padding就可以有效的管制這個目無領(lǐng)導(dǎo)的margin防止它越級用Margin還是用Padding何時應(yīng)當(dāng)使用margin：

　　1、需要在border外側(cè)添加空白時。

　　2、空白處不需要背景（色）時。

　　3、上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。何時應(yīng)當(dāng)時用padding：

　　1、需要在border內(nèi)測添加空白時。

　　2、空白處需要背景（色）時。

　　3、上下相連的兩個盒子之間的空白，希望等于兩者之和時。如15px + 20px的padding，將得到35px的空白。小結(jié)：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。

　　常見的瀏覽器下margin出現(xiàn)的bug

　　IE6中雙邊距Bug：

　　發(fā)生場合：當(dāng)給父元素內(nèi)第一個浮動元素設(shè)置margin-left（元素float:left）或margin-right（元素float:right）時margin加倍。

　　解決方法：是給浮動元素加上display:inline;CSS屬性；或者用padding-left代替margin-left。

　　原理分析：塊級對象默認的display屬性值是block，當(dāng)設(shè)置了浮動的同時，還設(shè)置了它的外邊距就會出現(xiàn)這種情況。也許你會問：“為什么之后的對象和第一個對象之間就不存在雙倍邊距的Bug”？因為浮動都有其相對應(yīng)的對象，只有相對于其父對象的浮動對象才會出現(xiàn)這樣的問題。第一個對象是相對父對象的，而之后對象是相對第一個對象的，所以之后對象在設(shè)置后不會出現(xiàn)問題。為什么display:inline可以解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。然后，float:left等浮動屬性可以讓inline元素haslayout，會讓inline元素表現(xiàn)得跟inline-block元素的特性一樣，支持高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個display inline的元素上。
(責(zé)任編輯：武林網(wǎng))