margin合併

css: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: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>
相關文章
相關標籤/搜索