問題描述：
乙個父包含框包含乙個子元素。給正常流的子元素乙個垂直外邊距margin-top就會使得父元素跟著往下走，而子元素和父元素的邊距則沒有發生變化。
html結構：
css樣式：
.box1
.box1_1
解決辦法：
1.修改父元素的高度，增添padding-top樣式模擬（常用）；
2.為父元素新增overflow:hidden;樣式即可（完美）；
5.為父元素或者子元素宣告浮動（可用）；
3.為父元素新增border（可用）;
4.新增額外的元素放在子元素最前面，設定高度為1px，overflow:hidden(若為行內元素，需要宣告為塊元素)（囉嗦）;
6.為父元素或者子元素宣告絕對定位（……）。
原理
乙個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。
這就是原因了。「巢狀」的盒元素也算「毗鄰」，也會 collapsing margins。這個合併margin其實很常見，就是文章段落元素，並列很多個的時候，每乙個都有上下1em的margin，但相鄰的之間只會顯示1em的間隔而不是相加的2em。這個很好理解，我就是奇怪為什麼w3c要讓巢狀的元素也共享margin，想不出來在什麼情況下需要這樣的表現。 這個問題的避免方法很多，只要破壞它出現的條件就行。給outer div加上 padding/border，或者給outer div / inner div設定為 float/position:absolute(css2.1規定浮動元素和絕對定位元素不參與margin摺疊)。
在 ie/win 中如果這個盒子有 layout 那麼這種現象就不會發生了：似乎擁有 layout 會阻止其孩子的邊距伸出包含容器之外。此外當 haslayout = true 時，不論包含容器還是孩子元素，都會有邊距計算錯誤的問題出現。
子元素的margin top屬性傳遞給父元素的問題
i am child i am father 左側為要實現的效果，右側為真的效果 我們期待的效果是,child的頂部距離parent 30px，但是結果是child距離父div的margin仍然是0，反而parent頂部距離自己的父元素30px.產生原因 來看css2.1盒模型中規定的內容 in t...
關於子元素的margin top影響父元素
來看看這個問題 子元素為什麼設定margin top會影響父元素的margin top。先把html,body,div的預設margin，padding設為0,再給父元素設定寬高，子元素設定寬高。然後又設定子元素的margin top為20px。效果如下 查了下，簡單來說是因為父元素沒有設定padd...
子元素的margin top會影響父元素
恢復內容開始 在css2.1盒模型中 in this specification,the expression collapsing margins means that adjoining margins no non empty content,padding or border areas o...