首頁 > 開發者 > JavaScript
解決div布局中第一個div的margin-top在瀏覽器中顯示無效果問題。，divmargin-top
原味來源:http://www.hicss.net/do-not-tell-me-you-understand-margin/
垂直外邊距合并問題
別被上面這個名詞給嚇倒了，簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。你可以查看W3Shool CSS外邊距合并瞭解這個基本知識。
實際工作中，垂直外邊距合并問題常見於第一個子項目的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產生問題，IE下反而表現良好。例子可以查看下面代碼(IE下表現“正常”，標準瀏覽器下查看 出現“bug”)：
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>垂直外邊距合并</title><style>.top{width:160px; height:50px; background:#ccf;}.middle{width:160px; background:#cfc;}.middle .firstChild{margin-top:20px;}</style></head> <body><div class="top"></div><div class="middle"> <div class="firstChild">我其實只是想和我的父元素隔開點距離。</div> <div class="secondChild"></div></div></body></html>
如果按照CSS規範，IE的“良好表現”其實是一個錯誤的表現，因為IE的hasLayout渲染導致了這個“表現良好”的外觀。而其他標準瀏覽器 則會表現出“有問題”的外觀。好了，如果你讀過了上面W3Shcool的CSS外邊距合并的文章後，就很容易討論這個問題了。這個問題發生的原因是根據規範，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子項目的上邊距重疊。
再說了白點就是：父元素的第一個子項目的上邊距margin-top如果碰不到有效border或者padding.就會不斷一層一層的找自己 “領導”(父元素，祖先元素)的麻煩。只要給領導設定個有效 border或者padding就可以有效管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。
對於垂直外邊距合并的解決方案上面已經解釋了，為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。
一般說來這個問題解釋到這裡，大多數文章就不會再深入下去了，但作為一名實戰開發人員，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開距離，而按照你這麼一個解法，其實是一種“修複”，為了“彌補修複”這個父子垂直外邊距合并這個CSS規範“Bug”，而強制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發生這樣的情況還是會忘記這條準則，而且在頁面設計稿裡如果不需要border-top加個上邊框，這麼一加反而畫蛇添足，為以後修改留下隱患。
為什麼一定要用border-top,padding-top去為了這麼一個所謂的標準規範而多寫這麼一行代碼呢？答案你可以參考另外一篇文章用Margin還是用Padding裡找到答案。
這裡我根據上面的內容直接給出其解決方案：只需要把margin-top改為使用padding-top即可解決，避免了margin的摺疊規範。
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
