margin 塌陷問題
在標(biāo)準(zhǔn)文檔流中，塊級標(biāo)簽之間豎直方向的margin會以大的為準(zhǔn)，這就是margin的塌陷現(xiàn)象。
1、 兩個盒子嵌套關(guān)系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
運行結(jié)果
子盒子和父盒子之間沒有出現(xiàn)10px的間距，而是父盒子與子盒子一起與頁面頂端產(chǎn)生了10px間隙。
解決方法：
方法一：為box1（即父盒子）添加邊框
border: 1px solid #ffffff;
方法二：為box1（即父盒子）添加overflow屬性
overflow: hidden;
方法一會產(chǎn)生 1px的邊框的距離，方法二不會有影響。
解決后的效果圖
2、 兩個盒子垂直并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: aqua;
margin-bottom: 50px;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
運行結(jié)果
上面的盒子設(shè)置 margin-bottom: 50px; 下面的盒子設(shè)置 margin-top: 10px；按理說，兩個盒子之間的距離應(yīng)為60px，然而并不是，兩盒子之間的距離僅是50px，也就是說兩盒子之間的margin出現(xiàn)了重疊部分，故而我們可以得出：垂直之間塌陷的原則是以兩盒子最大的外邊距為準(zhǔn)。這種情況下，可以設(shè)置一個外邊距。
