代码之家 › 专栏 › 技术社区 › Stav Alfi

为什么子div的margin不会和父div一起折叠

css html

Stav Alfi · 技术社区 · 6 年前

我看了这篇文章: Whatâs the Deal with Margin Collapse?

我违反了哪条规则?

.container1 {
    background-color: red;
    border-style: solid;
    border-color: black;
    margin-top: 10em;
}
.container2 {
    background-color: green;
    border-style: solid;
    border-color: purple;
    margin-top: 10em;
}

<div class="container1">
    <div class="container2">
        aaaaa
    </div>
</div>

1 回复 | 直到 6 年前

You Nguyen 6 年前

根据 Cascading Style Sheets (CSS) - The Official Difinition 在W3.ORG上,他们说:

没有线盒,没有间隙,没有填充和

...

border-style: solid; 这样地:

    .container1 {
        background-color: red;
        border-color: black;
        margin-top: 100px;
    }

    .container2 {
        background-color: green;
        border-color: purple;
        margin-top: 100px;
    }

这个会发生的。