margin合并

深藏阁楼爱情的钟 2022-01-17 16:29 235阅读 0赞

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">
        
        <div class="son"></div>
        
        <div class="son"></div>
        </div><div class="item">这里只是为了方便看底部margin</div>

转载于:https://blog.51cto.com/14009535/2377083