margin重疊和塌陷的問題 和行內塊出現間隙
阿新 • • 發佈：2018-12-03
1.解決margin重疊的問題（兩個盒子之間設定margin出現重疊）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { width: 200px; height: 200px; background: pink; margin-bottom: 50px; } .box2 { width: 200px; height: 200px; background: yellow; margin-top: 80px; /* display: inline-block; */ } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
給後面的div型別轉換：display:inline-block;
2.margin塌陷(問題，一個大盒子裡面有個小盒子，給小盒子新增margin-top,大盒子也會跟著往下移)
解決辦法：
（1）給父元素新增邊框
（2）給父元素新增overflow：hidden
（3）給父元素或者子元素新增浮動
3.如果把塊元素設定為inline-block元素與元素之間有空格，這個空格是因為解析的時候會把標籤換行當成一個字元
怎麼解決：（1）把所有標籤寫在同一行，而且之間沒有空格
（2）給父元素設定font-size：0,但是注意要給自己設定字型大小