首頁 > 開發者 > JavaScript
Margin的垂直外邊距問題，Margin垂直距問題
做練習的時候遇到一個margin的問題，代碼結構如下，給父元素body中的子項目div設定了margin:50px auto;本來我是想讓子項目div距離父元素上邊拉開50個像素，結果卻是子項目div和父元素body一樣高，並且距離<html>上邊距50px,如（a）：
<!doctype html><html><head><title></title><meta charset="utf-8"><meta http-equiv="X-UA-compatible" content="IE-edge"><meta name="viewport" content="width=device-width" initial-scale="1"> <style type="text/css"> html{ width: 100%; height: 100%; background: red; } body{ margin: 0; padding: 0; width: 100%; height: 100%; background:#47c9af; } div{ width: 800px; height: 200px; margin: 50px auto; background: yellow; }</style></head><body> <div> div內容 </div></body></html>
圖（a）：
查閱了一些資料，得知這個margin外邊距合并的問題,
簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。你可以查看CSS外邊距合并瞭解這個基本知識。
實際工作中，垂直外邊距合并問題常見於第一個子項目的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下(FirfFox、Chrome、Opera、Sarfi)產生問題，IE下反而表現良好。
這個問題發生的原因是根據規範，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子項目的上邊距重疊。
再說白點就是：父元素的第一個子項目的上邊距margin-top如果碰不到有效border或者padding.就會不斷一層一層的找自己的“領導”(父元素，祖先元素)的麻煩。只要給領導設定個有效 border或者padding就可以有效管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。
這個問題的解決方案：為父元素增加一個border-top或者padding-top即可解決這個問題。在本例中給父元素body元素修改為如下樣式即可：
body{ margin: 0; padding-top:1px;/*或者border-top:1px solid transform;*/ width: 100%; height: 100%; background:#47c9af;}
修改後的結果如（b）：此時子項目div與父元素body就正真拉開了
第一次寫部落格，繼續加油！（若發現博文哪裡有問題請指正）
有關margin垂直外邊距，參考連結http://wenku.baidu.com/link?url=knqAeYpgJ1BuTkfqwmj1jGJ8tti0bktLVPAL49tBhd0CcjrDHgCruvykjProOccMj6MZNqM6QbO15kIn1s9Ahgb_pV9CFUKyheThr7qUXzy
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
