盒子模型外邊距合併--塌陷問題
阿新 • • 發佈：2020-10-25
同時設定子級盒子和父級盒子的外邊距，會導致邊距設定失效：
<!DOCTYPE html> <html lang="en"> <!-- 解決方案： 1.可以為父級元素定義邊框 2.可以為父級元素定義內邊距 3.可以為父級元素新增<overflow:hidden></overflow:hidden> --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型外邊距合併--塌陷問題</title> <style> .father { width: 400px; height: 400px; background-color: purple; margin-top: 50px; /* 給父元素新增邊框 */ /* border: 10px solid transparant; */ /* padding: 1px;*/ overflow: hidden; } .son{ width: 200px; height: 200px; background-color: pink; margin-top: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
解決方式：
解決方案： 1.可以為父級元素定義邊框 2.可以為父級元素定義內邊距 3.可以為父級元素新增overflow:hidden