垂直外边距的折叠：
父子元素间相邻外边距，子元素的会传递给父元素（比如上外边距）
兄弟元素间的相邻垂直外边距取两个中大的那个值（两个正值取大，一正一负相加）
兄弟元素间的相邻垂直外边距取两个中大的那个值（两个正值取大，一正一负相加）
<style>
.box1{
//有或者没有，两个色块间的距离都不变，如果是200px，那么这里会取200px。
margin-bottom:100px
width: 200px;
height: 200px;
background-color: aqua;
}
.box2{
margin-top: 100px;
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
父子元素间相邻外边距，子元素的会传递给父元素（比如上外边距）
<style>
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
.box2{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
解决方式1、如果给.box1加个上边框的话就可以让它们外边距隔开；
解决方式2、把margin换成padding
但是这两种方式都很麻烦。下一节高度塌陷问题会给出更好的解决办法。
1219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
