1.解决margin重叠的问题（两个盒子之间设置margin出现重叠）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: pink;
margin-bottom: 50px;
}
.box2 {
width: 200px;
height: 200px;
background: yellow;
margin-top: 80px;
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>给后面的div类型转换：display:inline-block;
2.margin塌陷(问题，一个大盒子里面有个小盒子，给小盒子添加margin-top,大盒子也会跟着往下移)
解决办法：
（1）给父元素添加边框
（2）给父元素添加overflow：hidden
（3）给父元素或者子元素添加浮动
3.如果把块元素设置为inline-block元素与元素之间有空格，这个空格是因为解析的时候会把标签换行当成一个字符
怎么解决：（1）把所有标签写在同一行，而且之间没有空格
（2）给父元素设置font-size：0,但是注意要给自己设置字体大小