首先得說一下 margin摺疊
所謂margin摺疊，即相鄰的不同margin值有可能會被摺疊成同乙個margin值。看清楚哦，只是有可能會。至於哪些是相鄰元素？哪些又會存在摺疊？
這個鏈結裡闡述很全面。
這裡只分析子元素的垂直margin值對父元素的影響
（html結構：灰色父塊，紅色子塊，綠色子塊，白色父塊，黃色子塊。兩父塊相鄰）
第一種情況：父塊 沒有padding、沒有border邊框時
html結構
class="parent">
class="son1">div>
class="son2">div>
div>
class="parent2">
class="son3">div>
div>
css樣式
type="text/css">
body
body,div
.parent
.parent2
.son1
.son2
.son3
style>
(黃綠色為body部分，灰色為第乙個div父塊，紅色和綠色為div子塊，白色為下乙個div父塊)
紅色子塊設定了margin-top值為20px，而灰色父塊設定的margin-top值為0px，
綠色子塊設定margin-bottom值為-20px，灰色父塊設定margin-bottom值為0px。
此時父塊沒有padding、沒有border邊框
結果是灰色父塊受到了影響，它實際的margin-top值變為20px，margin-bottom值變為-20px，
此時第二個父塊（白色父塊）也受相鄰灰色父塊影響，margin值發生摺疊，因此白色父塊的margin-top變成了-20px，因此會覆蓋掉灰色父塊的20畫素的高度。
（不明白的請檢視上面鏈結中的「摺疊後的margin大小」）
當綠色子塊margin-bottom值為+20px時結果如下：
同理第乙個父塊受到了影響，它的margin-bottom值變為20px，而第二個父塊的margin-top值也變為+20px。
第二種情況：第一父塊 padding:1px;
css樣式增加一行**
.parent
瀏覽器顯示如下：
紅色子塊設定了margin-top值為20px，而灰色父塊設定的margin-top值為0px，
綠色子塊設定margin-bottom值為-20px，灰色父塊設定margin-bottom值為0px。
此時灰色父塊的margin-top值不會再受紅色子塊的影響。灰色父塊的margin-bottom值也不受綠色子塊的影響，即它的margin-top和margin-bottom值仍然為0px，
但是因為綠色子塊的margin-bottom值為-20px，因此相鄰的父塊底邊界會上移，綠色子塊溢位，採用overflow：hidden可以隱藏溢位部分。
白色父塊margin-top值也仍然為0px，和第一父塊相接。
綠色子塊margin-bottom值為+20px時結果如下：
灰色父塊的margin-top不會再受紅色子塊的影響。灰色父塊的margin-bottom也不受綠色子塊的影響，
即它的margin-top和margin-bottom值仍然為0px，
第三種情況：border：1px solid black;
第一種情況基礎上的css樣式增加一行**
.parent
瀏覽器效果與第二種情況相同，只是多了邊框，道理基本相同
紅色子塊設定了margin-top值為20px，而灰色父塊設定的margin-top值為0px，
綠色子塊設定margin-bottom值為-20px，灰色父塊設定margin-bottom值為0px。
綠色子塊設定margin-bottom值為+20px時
子元素的margin影響到父元素的大小
總體來講，這個問題是垂直外邊距合併問題。也就是乙個div，作為乙個元素的第乙個子集元素情況下，在設定了外邊距之後，會與父級的div元素在某種情況下進行合併，那麼在什麼情況下呢 第乙個元素的上外邊距會去查詢父級的border或者padding，如果沒找到，就會向外找margin，如果找到margin，...
子元素設定margin會影響父元素問題
參考 給子元素設定的margin結果作用在父元素身上，類似於 越級偽命令 問題的解決辦法有三種 1 為父元素設定padding。2 為父元素設定border。3 為父元素設定 overflow hidden 如果子元素不是div,p,h1等塊級標籤，而是a,span等行內標籤的話，則不會出現marg...
子元素上的margin作用到了父元素上
margin外邊距合併詳解 以上 的初衷是讓子元素的頂部距離父元素30px，但是事實上卻並沒有實現預 期的效果，而是子元素頂部緊貼父元素，並且margin top好像轉移給了父元素，讓父元素產生上外邊距。這其實是乙個典型的外邊距合併問題，但是並非 所有的瀏覽器都會產生這種情況，一般標準瀏覽器都會出現...