在css中margin和padding經(jīng)常一起使用，多數(shù)情況下他們實現(xiàn)相同的效果。在一個塊級元素中，margin指塊級元素的外邊距，padding指塊級元素的內(nèi)邊距。
對margin一些簡單使用本文不做介紹，下面我將羅列一些margin使用中容易混淆或者容易春錯的地方。
1.垂直外邊距合并問題
簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。這就是經(jīng)常說的margin重疊。
2.第一個子元素的margin-top問題
這是實際工作經(jīng)常碰到的一個問題，第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下(FirfFox、Chrome、Opera、Sarfi)產(chǎn)生問題，IE下反而表現(xiàn)良好。如果按照CSS規(guī)范，IE的“良好表現(xiàn)”其實是一個錯誤的表現(xiàn)，因為IE的hasLayout渲染導(dǎo)致了這個“表現(xiàn)良好”的外觀。
這個問題發(fā)生的原因是一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內(nèi)部文檔流中的第一個子元素的上邊距重疊。也就是說，父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的向上找。
解決方法就是給父級元素設(shè)置個有效的 border-top或者padding-top就可以了。這么寫當(dāng)然能解決問題，不過感覺很奇怪，為了寫一個margin-top，就強制個給父級元素加一個 border-top或者padding-top。與其這樣，還不如直接設(shè)置成padding-top。那什么時候該用margin，什么時候用padding？
3.用margin還是用padding
何時應(yīng)當(dāng)使用margin：
- 需要在
border外側(cè)添加空白時； - 空白處不需要背景（色）時；
- 上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。
何時應(yīng)當(dāng)時用padding：
- 需要在border內(nèi)測添加空白時；
- 空白處需要背景（色）時；
- 上下相連的兩個盒子之間的空白，希望等于兩者之和時。如15px + 20px的
padding，將得到35px的空白。
4.margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別
margin在塊級元素下，他的性能可以完全體現(xiàn)。
margin在行內(nèi)塊級元素下，也是有效果的，但是margin-top和margin-bottom對內(nèi)聯(lián)元素（對行）的高度沒有影響。
margin在inline元素中的效果跟行內(nèi)塊級元素下效果一致。
5.負margin技術(shù)及其應(yīng)用
許多高級應(yīng)用和頁面上的疑難雜癥都可以用負margin技術(shù)來實現(xiàn)。
http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
6.常見的瀏覽器下margin出現(xiàn)的bug
IE6/7/8下auto margin居中bug：
發(fā)生場合：給block元素設(shè)置margin auto無法居中
解決方法：出現(xiàn)這種bug的原因通常是沒有Doctype，然后觸發(fā)了ie的quirks mode，加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個width能夠解決，但根據(jù)本人親測，加with此種方法是無效的，如果沒有Doctype即使給元素添加width也無法讓block元素居中。
原理分析：缺少Doctype聲明。
IE8下input[button | submit] 設(shè)置margin:auto無法居中
發(fā)生場合：ie8下，如果給像button這樣的標(biāo)簽（如button input[type="button"] input[type="submit"]）設(shè)置{ display: block; margin:0 auto; }如果不設(shè)置寬度的話無法居中。
解決方法：可以給為input加上寬度
原理分析：IE8瀏覽器Bug。
IE8百分比padding垂直margin bug：
發(fā)生場合：當(dāng)父元素設(shè)置了百分比的padding，子元素有垂直的margin的時候，就好像父元素被設(shè)置了margin一樣。
解決方法：給父元素加一個overflow:hidden/auto。
原理分析：IE8瀏覽器Bug。
