CSS了解边界的边距

Question

我正在尝试理解我在看到这里可以看到的一些HTML代码时看到的行为.

您会注意到,如果您更改以下内容:

<div style="border: solid 1px black;">
    <div style="margin-top:50px;">
        Post Title
    </div>
</div>

对此(即"border:solid 1px black;"到"border:solid 0px black;"):

<div style="border: solid 0px black;">
    <div style="margin-top:50px;">
        Post Title
    </div>
</div>

内部div的边距不再影响外部div.我一直试图找到定义这种行为的W3.org规范,但没有运气.有人想帮忙吗？

Answer 1

这被称为"崩溃边际".

某些相邻的边距合并形成单一边际.这些利润被称为"崩溃".如果没有非空的内容,填充或边界区域或间隙将边缘区分开,则边距相邻.

一些更容易阅读: