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

你有几个解决方案：

• 使用填充
• 在您的父div上添加overflow：auto
• 将透明顶部边框添加到父div

Answer 2

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

Answer 3

我能够通过制作所有标头标签（h1-h6）display: inline-block;来解决这个问题。作为具有边距的内联元素，它们可以像这样溢出，但是作为内联块，它们与其他块表现得更好。