外边距折叠
常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。
现在给类名为"top"、“bottom"两个盒子都设置宽度、高度且都为"100px”、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。
解决方法：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top,.bottom {
width:100px;
height:100px;
margin:10px;
}
.top{
background-color:red;
}
.bottom {
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<section class="top"></section>
<section class="bottom"></section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top,.bottom {
width:100px;
height:100px;
margin:10px;
}
.top{
background-color:red;
}
.bottom {
background-color:green;
float:left;
}
</style>
</head>
<body>
<section class="top"></section>
<section class="bottom"></section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top,.bottom {
width:100px;
height:100px;
margin:10px;
}
.top{
background-color:red;
}
.bottom {
background-color:green;
position:absolute;
}
</style>
</head>
<body>
<section class="top"></section>
<section class="bottom"></section>
</body>
</html>
display:inline-block的效果会比较好
float和position两种方法虽然能够实现相同的效果，但是脱离了文档流，不容易控制元素的布局