Margin 重叠

by redky

HTML

<div class="line"></div>
<div class="box">
    <div class="inner"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

.line {
    background-color: #faa;
    height: 50px;
    margin-bottom: 50px;
}

.box {
    background-color: #faa;
    height: 50px;
    margin-top: 50px;
}

/* 内部不能解决外部问题 */
.box:before {
    content: ' ';
    display: block;
    height: 0;
    overflow: hidden;
}

.inner {
    height: 20px;
    margin-top: 60px;
    background-color: blue;
}