垂直外边距的重叠
在网页中相邻的垂直方向的外边距，会发生外边距的重叠
兄弟元素
兄弟元素之间的相邻外边距会取（绝对值）最大值，而不是取和，谁大取谁
特殊情况：如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取绝对值较大的
兄弟元素的外边距重叠，并对开发有利，不用处理
需求：将子元素移动到父元素的左下角
为上边的元素设置一个外边距box1
margin-bottom: 10px;为下边的元素设置一个外边距box2
margin-top: 10px;距离相隔10px
若距离设置为上边元素外边距为-20PX下边元素外边距是10PX则取10PX
如距离设置为上边元素外边距为-20PX下边元素外边距为-20PX则取20PX
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: blueviolet;
margin-bottom: -20px;
}
.box2{
width: 100px;
height: 100px;
background-color: chartreuse;
margin-top: -20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
