margin-top的项目在包含框之外有边距

Question

我有一些这样的效果:

#div {
   background: green; 
   width: 200px;
   height: 100px;
}

h1 {
   margin-top: 100px;
}

(显然有一些HTML可以用它.)

现在,当在浏览器中查看h1时,最顶部的显示#div和100px边距位于顶部#div.

任何人都可以提出理由吗？

(代码有点太复杂,无法插入相关部分,所以如果没有人可以给我答案,那么我会发布它,也许有人会发现错误或其他什么.)

Answer 1

这与H1标签无关.这就是我们所说的保证金崩溃.

你可以在这里找到关于这个主题的帖子:http: //reference.sitepoint.com/css/collapsingmargins

你有几个解决方案:

Answer 2

尝试添加填充。我以前见过这种问题。如果填充做了同样的事情，那么尝试在周围放置一个容器 div，但 #div 和 h1 然后添加边距。如果您只是想将 h1 从 #div 向下移动，那么填充是您最好的选择，因为它会“将 h1 进一步推入 #div '框'”。