父元素的盒子包含乙個子元素盒子，給子元素盒子乙個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值，而子元素和父元素的邊距則沒有發生變化。
css樣式：
.box1
.box2
bug原因：
in this specification, the expression collapsing margins means that adjoining margins (no non-emptycontent, padding or border areas or clearance separate them) of two or moreboxes (which may be next to one another or nested) combine to form a singlemargin. 所有毗鄰的兩個或更多盒元素的margin將會合併為乙個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、padding或border分隔。
這就是原因了。「巢狀」的盒元素也算「毗鄰」，也會 collapsing margins。這個合併margin其實很常見，就是文章段落元素，並列很多個的時候，每乙個都有上下1em的margin，但相鄰的之間只會顯示1em的間隔而不是相加的2em。這個很好理解，我就是奇怪為什麼w3c要讓巢狀的元素也共享margin，想不出來在什麼情況下需要這樣的表現。 這個問題的避免方法很多，只要破壞它出現的條件就行。給outer div加上 padding/border，或者給outer div / inner div設定為float/position:absolute(css2.1規定浮動元素和絕對定位元素不參與margin摺疊)。
解決方法：
1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；常用）
2、為父元素新增overflow：hidden；樣式即可（完美）
3、為父元素或者子元素宣告浮動（float：left；可用）
4、為父元素新增border（border:1px solidtransparent可用）
5、為父元素或者子元素宣告絕對定位
css父元素和子元素之間margin top的問題
問題 父元素的盒子包含乙個子元素盒子，給子元素盒子乙個垂直外邊距margin top，父元素的盒子也會受到子元素的margin top值的影響。原因 所有毗鄰的兩個或者多個元素的margin將會合併為乙個margin共享之。毗鄰的定義為 同級或者巢狀的盒元素，並且它們之間沒有非空內容。padding...
父元素與子元素的width關係
演示如下 父子元素width關係 這時，我們在審查元素時可以發現，span和a的width 和height 的寬度是auto，即寬度是由其內容撐起來的，故為auto。如下 這時，子元素設定為了父元素width的100 那麼子元素的寬度也是500px 但是如果我們把子元素的width去掉之後，就會發現...
子元素的margin top與父元素合併的問題
問題集 整理自網路 貌似這個 collapsing margins 的問題由來已久啊！一般解釋是 2個或以上盒模型之間 關係可以是相鄰或巢狀 相鄰的margin屬性 這之間不能有非空內容 padding區域 border邊框或使用清除分離方法 結合表示為乙個單獨的margin。w3school是這麼...