margin 合并

by redky

HTML

<!-- 
    垂直方向相邻元素 margin 合并 
-->
<div class="box">
    <p class="side"></p>
    <p class="main"></p>
</div>

<!-- float 后依然 margin 合并; bfc 影响内部元素 -->
<div class="box float">
    <div class="side"></div>
    <div class="main"></div>
</div>

<!-- clear -->
<div class="box clear">
    <div class="side">clear</div>
    <div class="main"></div>
</div>

<div class="box">
    <div class="side"></div>
    <div class="main">
        <!-- 
            子元素和父元素之间 - first/last 元素
           .inner 空元素 和 .main margin-top/.side margin-bottom 合并 
        -->
        <div class="inner"></div>
    </div>
</div>

<!-- 使用 .main padding 阻止 margin 合并 -->
<div class="box fixed-padding">
    <div class="side"></div>
    <div class="main">
        <div class="inner"></div>
    </div>
</div>

<!-- 使用 .main border 阻止 margin 合并 -->
<div class="box fixed-border">
    <div class="side"></div>
    <div class="main">
        <div class="inner"></div>
    </div>
</div>


<!-- 使用 .main bfc 阻止 margin 合并 -->
<div class="box fixed-bfc">
    <div class="side"></div>
    <div class="main">
        <div class="inner"></div>
    </div>
</div>


<!-- 使用 .main clear 阻止 margin 合并 -->
<div class="box fixed-clear">
    <div class="side"></div>
    <div class="main">
        <div class="inner"></div>
    </div>
</div>

CSS

* {
    margin: 0;
}

.box {
    float: left;
}

.side, 
.main {
    height: 80px;
    margin: 20px;
    width: 80px;
    line-height: 80px;
    text-align: center;
}

.side {
    background-color: #000;
    color: #fff;
}

.main {
    background-color: #aaa;
}

.inner {
    margin-top: 30px;
}

.fixed-padding .main {
    padding: 1px;
}

.fixed-border .main {
    border: 1px solid #000;
}

.fixed-bfc .main {
    overflow: hidden;
}

.fixed-clear .side {
    float: left;
}
.fixed-clear .main {
    clear: both;
}

.float .side {
    float: left;
}
.float .main {
    clear: both;
}

.clear .side,
.clear .main {
    float: left;
}
.clear .main {
    clear: left;
}