沐鳴代理:_子元素margin-top導致父元素移動的問題

上面兩個p標籤之間的間隔是20px。,今天就來說說整個問題產生的原因,以及解決方案。,今天在修改頁面樣式的時候,遇到子元素設置margin-top 但是並沒有使得子元素與父元素之間產生間隔,而是作用在了其父元素上,導致父元素產生了一個margin-top 的效果。,1、同一層相鄰元素之間,Copy <div class=”A”>元素A</div> <div class=”B”>元素B</div> <style> .A, .B { width: 50px; height: 50px; } .A { background: yellow; margin-bottom: 10px; } .B { background: pink; margin-top: 20px; } </style>,2、父子元素之間沒有內容,Copy <div class=”box”> <div class=”A”>元素A</div> <div class=”B”>元素B</div> </div> <div class=”next”>Next</div> <style> .box { margin-top: 10px; margin-bottom: 10px; background: #eee; } .A, .B { width: 50px; height: 50px; } .A { background: yellow; margin-top: 20px; } .B { background: pink; margin-bottom: 20px; } .next { height: 50px; background: #eee; } </style>,解決辦法:,

,Copy .clearfix::after { content: “”; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } .clearfix { zoom: 1; },
,在MDN上面有這麼一段文字:,有三種情況會產生邊距摺疊:,上面兩個p標籤之間的間隔是20px。