margin-top 外邊距合併

這是一個早之前研究過的東西，今天java開發提及了這個，順帶記錄一下。
這裏有一行代碼，很簡單的一段代碼

<style type="text/css">
#div1{
    background:#000;
    width:100px;
    height:100px;
    margin-top:10px;
}
#div2{
    margin-top:20px;
    background:#f00;
    width:50px;
    height:50px;
}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

但是在瀏覽器中打開後，竟然是這個樣子的~

( 黑色的區塊爲div1,紅色的爲div2 )

從效果上看div2的margin-top像是沒有生效，經測量div1的margin-top值，發現這個div2的margin-top像是生效到div1上了。

就這幾行代碼寫錯是不大可能，那這又是怎麼回事？

以前遇到這個問題時，試遍了全部的瀏覽器，都是這個樣子；我就覺着這是個兼容性極佳的BUG。

後來一個偶然的機會發如今父級上增長border或者overflow:hidden是能夠規避這個問題，且這個問題只會在常規流向中出現，也就是說用position或者是float都不會存在這個問題。

整點原理規範什麼的提升一下；百度一下，你就知道。。

邊距重合 來源:W3C CSS2.1

在本規範中，表述邊距重合意味着兩個或多個框（可能相鄰也可能嵌套）的相鄰的邊距（其間沒有邊白或邊框間隔）重合在一塊兒而造成一個單一的邊距。
CSS2中，水平邊距永遠不會重合。

垂直邊距可能在特定的框之間重合：

• 常規流向中兩個或多個塊框相鄰的垂直邊距會重合。結果的邊距寬度是相鄰邊距寬度中較大的值。若是出現負邊距，則在最大的正邊距中減去絕對值最大的負邊距。若是沒有正邊距，則從零中減去絕對值最大的負邊距。
• 在一個浮動框和其它框之間的垂直邊距不重合。
• 絕對和相對定位的框的邊距不重合。

首先了解到這並非BUG，而是個規範，雖然看上去像是BUG
按着規範試一下,覺着仍是像是個BUG。

看規範是一目十行，過目就忘,仍是整理一下。

外邊距合併的觸發條件：

• 常規流向佈局，未使用定位或者是浮動
• 存在垂直邊距
• 父級元素不存在border,overflow:hidden
• 在父級元素與子元素之間不存在擁有實際高度的元素(包含文本)

外邊距合併的解決方式：

• 父級元素增長border,overflow
• 使用定位或者是浮動
• 使用padding-top替代margin-top,比較推薦這個。

隨筆一行
這是前端最好的時代， 這也是前端最壞的時代。 衆多前端框架滿天飛，隨着 jQuery 在前端行業的慢慢弱化，老是會有一種斯人遠去，何者慰籍的感受。互勉吧，各位。

另推薦個表格組件gridManager