css:
* {
margin: 0;
padding: 0;
}
.parent {
/*BFC*/
/*display: inline-block;*/
/*块状化父元素*/
/*overflow不为visible 属性让父级元素块状格式化上下文*/
/*position: absolute;*/
/*absolute 块状化,*/
/*padding: 10px;*/
/*border: 1px solid green; 解决父元素和子元素margin合并*/
margin: 10px 0;
background: green;
/*阻止底部margin合并的一个方法*/
/* height: 300px;
max-height: 300px;
min-height: 300px; */
}
.son {
width: 300px;
height: 100px;
margin-bottom: 50px;
margin-top: 50px;
background-color: red;
}
.son:nth-of-type(2n) {
background-color: blue;
}
.item {
background: red;
height: 10px;
}
span {
/*隔断*/
/*父子margin合并,以及兄弟间的margin合并*/
display: inline-block;
height: 0;
overflow: hidden;
}
html:
<div class="parent">
<!-- <span>
1
</span> -->
<div class="son"></div>
<!-- <span>3</span> -->
<div class="son"></div>
<!-- <span>
2
</span> -->
</div>
<div class="item">
这里只是为了方便看底部margin
</div>