解決margin-top塌陷的6種方法
阿新 • • 發佈：2019-01-29
demo:一個父盒子巢狀一個子盒子，子盒子margin-top帶來的塌陷問題。
6種方法:
1.給父盒子新增border
2.給父盒子新增padding-top 3.給父盒子新增overflow:hidden 4.父盒子:position:fixed 5.父盒子:display:table 6.給子元素的前面新增一個兄弟元素 屬性為:content:""; overflow:hidden;<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { margin: 0; padding: 0; } .parent { width: 400px; height: 400px; background-color: red; margin: 0 auto; } .son { width: 200px; height: 200px; background-color: green; margin: 0 auto; margin-top: 100px; } </style> </head> <body> <div class="parent"> <div class="son"></div> </div> </body> </html>