什么是 margin 塌陷衷敌？
- 首先先要了解margin在盒子模型中的用法即舌， 子元素的 margin ，是參考父元素的 content 計算的偿荷。上 margin 、左 margin ：影響自己的位置唠椭；下 margin 跳纳、右 margin ：影響后面兄弟元素的位置。
2.創(chuàng)建一個盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1 {
width: 400px;
height: 400px;
background-color: gray;
}
#d2 {
width: 100px;
height: 100px;
background-color: chartreuse;
}
#d3 {
width: 100px;
height: 100px;
background-color: violet;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">第一</div>
<div id="d3">第二</div>
</div>
</body>
</html>
圖片1.png
3.當(dāng)在第一的div的盒子加入上margin和第二的div盒子下margin時查看運(yùn)行效果
#d2 {
width: 100px;
height: 100px;
background-color: chartreuse;
margin-top: 50px;
}
#d3 {
width: 100px;
height: 100px;
background-color: violet;
margin-bottom: 50px;
}
圖片2.png
此時會發(fā)現(xiàn)第一個子元素的上 margin 會作用在父元素上贪嫂，最后一個子元素的下 margin 會作用在父元素上寺庄。
我們稱此時出現(xiàn)的問題為margin塌陷
怎樣去解決margin塌陷
怎樣去解決margin塌陷，其實很簡單力崇，有三種方案
方案一： 給父元素設(shè)置不為 0 的 padding 斗塘。
方案二： 給父元素設(shè)置寬度不為 0 的 border 。
方案三：給父元素設(shè)置 css 樣式 overflow:hidden
#d1 {
width: 400px;
height: 400px;
background-color: gray;
/* 方案一 */
padding: 1px;
/* 方案二 */
border: 1px black solid;
/* 方案三 */
overflow: hidden;
}
優(yōu)先推薦方案三
最后我們一起看下效果（我使用的是方案三）
圖片3.png
