Collapsing margins

Collapsing margins

Horizontal margins never collapse

.outer{
    width: 300px;
    height: 300px;
    background-color: tomato;
}
.inner{
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    margin-top: 100px;
}

<div class="outer">
    <div class="inner"></div>
</div>

解决方案

• 给父元素设置 BFC
• 设置父相子绝
• 给父元素设置 padding 不为 0