写给自己
本文讲的是一个不能称之为bug的一个小bug
垂直方向的外边距合并，左右不会合并
理解
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS--外边距合并</title>
<style type="text/css">
.box01,.box02{
width: 200px;
height: 200px;
background-color: #00FFFF;
}
.box01{
margin-bottom: 50px;
}
/* 垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距高度等于两个发生合并的外边距的高度中的较大者*/
.box02{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box01">1</div>
<div class="box02">2</div>
<br>
<p>可以看到上面两个方框的边距是50px，属于.box01设置的样式</p>
<p>解决方式：<br>
1.使用这种特性<br>
2.设置一边的外边距，一般设置margin-top <br>
3.将元素浮动或者定位
</p>
</body>
</html>
示例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS--外边距合并理解联系示例代码</title>
<style type="text/css">
.box{
width: 500px;
border: 1px solid #00FFFF;
margin: 50px auto 0;
}
.box div{
/* 同时设置margin-top和margin-bottom实现效果 */
/* margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 20px; */
/* 简化代码 */
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<div>
垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
</div>
<div>
垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
</div>
<div>
垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
</div>
<div>
垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
</div>
</div>
<br>
<p>注释：就是为了实现这种效果。所以才会产生外边距合并这种功能</p>
</body>
</html>
