在具有 DIV 内边距的子元素中找到了替代方法您还可以添加：

.parent { overflow: auto; }

要么：

.parent { overflow: hidden; }

这可以防止边距塌陷。边框和填充做同样的事情。因此，您还可以使用以下方法来防止上边距崩溃：

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

2021 年更新：如果您愿意放弃对 IE11 的支持，您也可以使用新的 CSS
构造display: flow-root。有关块格式化上下文的全部详细信息，请参阅MDN Web
文档。

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

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>不会相加，而是相互滑入（它们折叠）。and元素<p>也是如此。<ul>

可悲的是，对于现代设计，当您明确想要一个容器时，这个想法可能会咬住您。这在 CSS
speak中称为新的块格式化上下文。overflowor 保证金技巧会给你。