外邊距塌陷有兩種情況
情況一：
兩個同級元素诈嘿，處置排列，上面的盒子給margin-bottom,下面的盒子給margin-top,那么他們兩個的間距會重疊糠雨，以最大的那個計算
例如：
<style>
.box-one{
width: 50px;
height: 50px;
background-color: #f40;
margin-bottom: 20px;
}
.box-two{
width: 50px;
height: 50px;
background-color: yellow;
margin-top:30px;
}
</style>
<body>
<ul>
<li class="box-one">11</li>
<li class="box-two">22</li>
</ul>
</body>
圖1.jpg
最后兩個盒子的間距不是50px才睹，而是30px，取的是兩個盒子中margin較大的一方
情況二：
兩個父子元素甘邀，內(nèi)部的盒子給margin-top,其父級也會受到影響琅攘，同時產(chǎn)生上邊距，父子元素會進行粘連
例如：
<style>
.box-father{
background-color: #f40;
}
.box-son{
width: 50px;
height: 50px;
background-color: yellow;
margin-top:30px;
}
</style>
<body>
<div class="box-father">
<div class="box-son">22</div>
</div>
</body>
圖二.jpg
解決辦法：
1松邪、為父盒子添加border,添加border屬性后坞琴，父盒子就不是真正意義上的貼合，就會有一個邊框了逗抑，所以可以給父盒子設置一個透明的邊框
border:1px solid transparent
2剧辐、為父盒子添加overflow:hidden
3、為父盒子添加padding值
4邮府、為父盒子添加display:table
5荧关、為父盒子添加position:fixed
6、利用偽元素給父元素的前面添加一個空元素
.father::before{
content:'';
display:table
}
