子/父元素外邊距重疊最終解決方案before偽類元素 · 前端

[css 子級元素設置margin-top父級元素會跟著移動問題解決](https://blog.csdn.net/weixin_67375532/article/details/125357764) 根據規范，一個盒子如果沒有上邊補白(padding-top)和上邊框，那么它的上邊距應該和其文檔流中的第一個子級元素的上邊距重疊 ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: deeppink; } .box3{ width: 100px; height: 100px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> </body> </html> ~~~ 發現不是box3往下走，而是父元素box1往下走100px，因為父類容器沒有border和padding的時候父元素box1和之元素box3的外邊距發生重疊，子元素的外邊距傳遞給了父元素的（當然我們可以給父元素border和padding但是不是完美的解決方案） ![](https://img.kancloud.cn/5f/f0/5ff0266d5994f446fdf87f0adb0bba9b_1263x306.png) 在BFC中給box1啟用BFC`overflow:hidden`可以解決此問題，但是在某些時候有副作用我們可以使用.box1::before偽元素完美解決 ``` .box1::before{ content: ""; display: table; } ``` ![](https://img.kancloud.cn/ab/7c/ab7c412a3735f6bd081973e092b18165_239x155.png)