DIV保证金不符合要求

Question

我在一个非常小的问题上感到困惑，尽管我知道我肯定做错了什么。 我拿了两个不同CSS的div。

<div id="main">
    <div id="internal">
        hii
  </div>
</div>

“main”id的CSS是

#main
{
    height:80px;
    background-color:black;
    border:1px solid green;
}

和“内部”id的CSS是

#internal
{
    height:40px;
    background-color:red; 
    margin-top:30px
}

这是JSFiddle LINK

内部div中的margin-top只有在主div中有border属性时才有效。如果我从主div中删除边框，那么它的工作方式不同。我不知道这里发生了什么。有人可以回答我的问题吗？

Answer 1

您所看到的是margin collapse的情况（或者，请阅读W3C specification以获取更详细的说明）。这种情况发生在：

1. 垂直边距是相邻的（无论是兄弟姐妹还是亲子）
2. 空元素块

您应该尝试使用#main上的填充，即：

#main {
    height:80px;
    background-color:black;
    border:1px solid green;
    padding-top: 30px;
}