css - 子元素上的边距移动父元素

Question

我有一个 div(parent)包含另一个 div(child)。 Parent 是 body 中的第一个元素，没有特定的 CSS 样式。当我设置

.child
{
    margin-top: 10px;
}

最终结果是我的 child 的顶部仍然与 parent 对齐。我的 parent 向下移动了 10 像素，而不是 child 向下移动 10 像素。

我的 DOCTYPE 设置为 XHTML Transitional。

我在这里错过了什么？

编辑 1
我的 parent 需要严格定义尺寸，因为它有一个必须从上到下显示在其下方的背景(像素完美)。因此，在其上设置垂直边距是不行的。

编辑 2
此行为在 FF、IE 和 CR 上相同。

Answer 1

在 Child elements with margins within DIVs 找到替代方案您还可以添加:

.parent { overflow: auto; }

或:

.parent { overflow: hidden; }

这可以防止边距变为 collapse .边框和填充做同样的事情。因此，您还可以使用以下方法来防止 top-margin 崩溃:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 年更新:如果你愿意 drop IE11 support您还可以使用新的 CSS 构造 display: flow-root .参见 MDN Web Docs有关 block 格式化上下文的全部详细信息。

---

根据大众要求更新:折叠边距的全部意义在于处理文本内容。例如:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

因为浏览器折叠边距，文本会如您所愿地显示，并且 <div>包装标签不影响边距。每个元素都确保它周围有间距，但间距不会加倍。 <h2> 的边距和 <p>不会加起来，而是会相互滑入(它们会坍塌)。 <p> 也是如此和 <ul>元素。

遗憾的是，在现代设计中，当您明确想要一个容器时，这种想法可能会影响您。这称为新的 block formatting context用 CSS 来说。 overflow或 margin 技巧会给你。