css margin外边距折叠

两个div同时设置外边距时，他们中间的外边距会叠加在一起，以最大的为准，而不是两个相加

div{
    
    
	width: 100px;
	height: 100px;
}
.div1{
    
    
	background-color: pink;
	margin-bottom: 50px;
}
.div2{
    
    
	background-color: orange;
	margin-top: 100px;
}

<div class="div1"></div>
<div class="div2"></div>