maigin连写：
Margin: 20px 30px: 上下20px 左右30px
Margin: 20px 30px 40px: 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px: 上20px 右30px 下40px 左50px
垂直方向外边距合并:
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1{
200px;
height:100px;
background-color:orange;
margin-bottom:20px;
}
.box2{
200px;
height:100px;
background-color:gray;
margin-top:10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
注释：上下两个盒子最后的距离不是30px，而是其中设值最大的20px。
嵌套的盒子外边距塌陷：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.father{
/*overflow:hidden;*/
400px;
height:400px;
background-color:gray;
}
.son{
50px;
height:50px;
background-color:red;
margin-top:20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
上面嵌套盒子设置了margin-top:20px，随着发生了父盒子也往下移动了20px。
解决办法是：
1 、给父盒子设置边框（因为当父盒子没有边框的时候，子盒子找外边距的时候会将浏览器作为参照的对象）
2、给父盒子overflow:hidden; bfc 格式化上下文
百分比继承：
margin-top：20%，这个继承关系是继承了父盒子的宽度，这很奇葩
<style> .parent { width: 200px; height: 100px; border: 1px solid #000; } .son { width: 50%; height: 50%; background-color: pink; /* 相对于父盒子的20% */ margin-top: 20%; } </style>