css：

* {            margin: 0;            padding: 0;        }        .parent {            /*BFC*/            /**加浮动，浮动的元素不会有margin合并，有包裹性、破坏文档流、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:

    
    
         
     
    
         
     
    
     
    
    
     这里只是为了方便看底部margin