<h1> 的 CSS margin-top 影响父级的边距答案

【问题标题】：CSS margin-top of <h1> affects parent's margin<h1> 的 CSS margin-top 影响父级的边距
【发布时间】：2014-01-08 11:40:40
【问题描述】：

我已经在这个问题上寻找了一段时间，但没有找到直接的答案。在向元素添加边距顶部时，在我的情况下，它主要发生在标题上。在许多情况下，margin-top 与父级共享。

HTML

  <div>
      <h1>My title</h1>
    </div>

CSS

div{
  padding:20px;
}

h1{
 margin-top: 20px;
}

前面代码的结果也会给 div 添加一个 margin-top，就好像我们有下面这样：

div{
  padding:20px;
  margin-top:20px; /*this one is implemented by the browser, not written on the code*/
}

解决此问题的一种方法是将 overflow:auto 添加到父级，在这种情况下，div css 具有：

div{
  padding:20px;
  overflow:auto;
}

虽然前面的例子解决了问题，但我不清楚WHY???。这与 "collapsing margins" 有关，其中一个边距显然与父级的边距相结合。但是为什么？？？？

我们如何知道父级何时会折叠子级的边距，何时不会，块的此属性的目的是什么，或者它是一个错误？

这是问题的JSFiddle demo。

这是解决方案的JSFiddle demo

谢谢。

【问题讨论】：

我会对这个问题的答案感兴趣。我也观察到了这种行为，这真的让我很烦！
stackoverflow.com/questions/1762539/…
嗨@AndréFigueiredo，感谢您的链接，但我没有看到我们为什么会有这种行为的解释。我知道如何解决它，但我不清楚为什么。谢谢
这就是我喜欢这样做的原因，position: relative; top: size goes here;。您无需担心margin 行为的时髦方式。（可能只是我，但我从不喜欢使用margin）

标签： css margin

【解决方案1】：

解决溢出问题：自动；不好，您是否尝试过为您的 div 提供 ID 或 CLASS，然后在您的 CSS 中执行此操作

#divID{
padding:auto;
}

#divID h1{
margin-top: 20px;
}

永远不要使用溢出，因为如果你在你的 DIV 中添加一个 SELECT 可能会导致更多问题，祝你好运

在 CSS 中，您可以通过三种不同的方式来指定要设置样式的元素。每种方式都适用于特定的一组目的，但是通过同时使用这三种方式，您可以真正利用样式表的级联功能。描述页面上对象的三种方法是通过它们的标签名称、它们的 ID 或它们的类。

【讨论】：

虽然这可能会解决问题，但问题更多的是为什么会这样。

【解决方案2】：

如果元素是第一个子元素，它将向父元素添加margin-top，与父元素的margin-top 折叠。

W3 collapsing-margins section 中明确说明了为什么有时边距不折叠。

我建议使用 padding-top 或以下解决方法：Margin on child element moves parent element，因为overflow: hidden 会增加附带损害。

看这个例子：fiddle

HTML：

<div id="outside">
    <div id="div1">
        <h1>margin in parent</h1>
    </div>

    <div id="div2">&nbsp;
        <h1>margin inside</h1>
    </div>
</div>

CSS：

#outside {
    background-color: #ccc;
    border:1px solid #000;
}
#div1 {
  background-color: #66d;
}
#div1 h1 {
  margin: 20px 0 0 0;
}
#div2 {
  background-color: #6d6;
}
#div2 h1 {
  margin: 20px 0 0 0;
}

【讨论】：

这并不能解释原因。请实际阅读问题。
我不明白“这不能解释为什么”的评论。第一句话是我在此页面上读到的最有帮助的内容。
@TylerCollier IMO 这个问题的表述不好（特别是标题），OP 的真正问题是为什么在某些情况下边距不会崩溃。这是 CSS 规范中的一条规则。 “那为什么它是规范中的规则？”这是由于margin的实际目标，而不是“严格”移动元素X像素。做什么..我猜人们不喜欢阅读他们使用的语言规范..

【解决方案3】：

这是一篇不错的文章，略作解释

http://reference.sitepoint.com/css/collapsingmargins

在上面的链接中找到这个...

折叠父元素和子元素之间的边距

到目前为止，我们只解决了相邻的折叠效果元素，但同样的过程也适用于父母和孩子谁的边缘接触。我们所说的“触摸”是指不接触的地方相邻边距之间存在填充、边框或内容。在下面的例子，一个父元素有一个子元素上边距已设置：

h1 { 边距：0;背景：#cff； } div { 边距：40px 0 25px 0; 背景：#cfc； } p { 边距：20px 0 0 0;背景：#cf9； } 在上面的样式表，你可以看到声明了一个上边距值对于 p 元素，在下面的代码摘录中，您可以看到 p 元素是 div 元素的子元素：

标题内容

段落内容
此代码的结果如图 2 所示。
图 2. 折叠子段落的边距折叠 h1 元素和之间的边距带有子 p 元素的 div 元素。有一个 40 像素的垂直 h1 元素和段落内容之间的间隙。您可能已经预计该段落将位于距标题，因为 div 元素的 margin-top 为 40px 并且有一个 p 元素上还有 20px 的 margin-top。您可能还期望 div 元素的背景颜色的 20px 将显示在上面这段落。这不会发生，因为如图所示 2、边距折叠在一起形成一个边距。只有最大的保证金适用（如在相邻块的情况下），因为我们已经见过。

事实上，如果我们的 div 元素没有顶部，我们会得到相同的结果边距和 p 元素的边距顶部为 40px。 40px margin-top on p 元素有效地成为 div 元素的上边距，并将 div 向下推页面 40px，留下 p 元素紧紧地嵌套在顶部。 div 上看不到背景段落上方的元素。 ...

【讨论】：

【解决方案4】：

感谢大家的回答，@gaurav5430 发布了一个链接，其中包含一个非常精确的定义，我想将其总结到这个答案中。至于他们为什么决定这些元素应该表现得像这样，我仍然不清楚；但至少我们能够找到适用于折叠边距的规则：

" 简单来说，这个定义表示当两个元素的垂直边距接触时，只尊重margin值最大的元素的margin，而margin较小的元素的margin值将折叠为零

基本上在我们关于原始问题的示例中，最大边距顶部是 <h1> 之一，因此被采用并应用于父 <div>。

这条规则被取消了：

浮动元素
绝对定位的元素
行内块元素
溢出设置为可见以外的任何元素（它们不会与子级一起折叠边距。）
已清除的元素（它们的上边距不会与其父块的下边距一起折叠。）
根元素

这就是overflow:hidden解决问题的原因。

感谢@gaurav5430；这是参考：http://reference.sitepoint.com/css/collapsingmargins

还要感谢 @Adrift 发布了非常好的资源，尽管我发现 @gaurav5430 的回答更直接且更易于理解。

【讨论】：