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

Question

我有这样的效果：

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

h1 {
   margin-top: 100px;
}

（显然有一些 HTML 与之配套。）

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

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

（代码有点太复杂，无法插入相关部分，所以如果没有人能给我答案，那么我会发布它，也许有人会发现错误或其他东西。）

score 16 · Accepted Answer

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

你有几个解决方案：

score 3 · Accepted Answer

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

score 1 · Accepted Answer

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

3 回答 3