问子元素上的边距移动父元素

EN

在Child elements with margins within DIVs上找到了一个替代方案，您还可以添加：

.parent { overflow: auto; }

或者：

.parent { overflow: hidden; }

这样可以防止边距变为collapse。边框和填充的作用是一样的。因此，您还可以使用以下方法来防止顶部边际崩溃：

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

2021更新:如果你愿意使用drop IE11 support，你也可以使用新的CSS construct display: flow-root。有关块格式上下文的完整详细信息，请参见MDN Web Docs。

通过流行的请求进行更新：压缩页边距的全部要点是处理文本内容。例如：

​

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>元素也是如此。

不幸的是，在现代设计中，当你明确想要一个容器时，这个想法可能会咬你一口。用CSS的话来说，这叫做新的block formatting context。overflow或保证金技巧会让你做到这一点。

这是正常行为(至少在浏览器实现中)。边距不会影响子项相对于其父项的位置，除非父项具有填充，在这种情况下，大多数浏览器会将子项的边距添加到父项的填充中。

为了获得你想要的行为，你需要：

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

虽然所有的答案都解决了这个问题，但它们也伴随着权衡/调整/折衷，比如

你必须浮动元素，这会将父元素向下推至少1px，然后通过在父元素本身中引入-1px

• floats，来进行调整。当parent已经在relative units.
• padding-top，中使用border-top
• overflow: hidden，时，这可能会产生问题当parent应该显示溢出内容(如下拉列表)时，无法使用menu
• overflow: auto，margin-top为(有意)溢出内容(如阴影或工具提示的三角形)的父元素引入滚动条

这个问题可以通过使用CSS3伪元素来解决，如下所示

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/