margin塌陷与合并
一、margin塌陷。
现象：两个嵌套在一起的盒子，当给第二个盒子设置margin-top属性时，两个盒子将一起移动。
<!DOCTYPE html>
<html>
<head>
<title>margin塌陷</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 200px;
height: 200px;
background-color: #6c6c6c;
/* border: 1px solid #000; */
/* overflow: hidden; */
/* float: left; */
/* position: absolute; */
}
.box2{
width: 60px;
height: 60px;
background-color: #ccc;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
解决方法：
- border: 1px solid #000;
- overflow: hidden;
- float: left;
- position: absolute;
二、margin合并。
现象：两个兄弟元素在垂直方向上的margin是合并的（不叠加）。
会取两者之间的较大值。（通常设置上一个元素的margin-bottom值）。