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

CSS margin-top of <h1> affects parent's margin

提问by multimediaxp

I have look for a while now on this problem and have not found a straight answer. When adding a margin top to an element, in my case it happens mostly with headings. In many occasions the margin-top is shared with the parent.

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

HTML

HTML

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

CSS

CSS

div{
  padding:20px;
}

h1{
 margin-top: 20px;
}

The result of the previous code will also add a margin-top to the div, as if we had the following:

前面代码的结果也会为div添加一个margin-top，就像我们有以下内容：

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

A way to solve this is by adding overflow:autoto the parent, in this case the div css has:

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

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

Although the previous example solves the problem, it is not clear to me WHY???. This has something to do with "collapsing margins", where apparently a margin is combined with the parent's margin. But why????

虽然前面的例子解决了问题，但我不清楚为什么？？？. 这与“折叠边距”有关，显然边距与父边距相结合。但是为什么？？？

How do we know when a parent will collapse the margin of the child and when not, what is the purpose of this property of the blocks, or is it a bug?

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

Here's a JSFiddle demoof the problem.

这是问题的JSFiddle 演示。

And Here is a JSFiddle demoof the solution

这是解决方案的JSFiddle 演示

Thanks.

谢谢。

采纳答案by multimediaxp

Thank you all for your answers, @gaurav5430 posted a link with a very precise definition that I would like to summarize into this answer. As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins:

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

"In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero

“简单来说，这个定义表示当两个元素的垂直边距相互接触时，只有边距值最大的元素的边距会得到尊重，而边距值较小的元素的边距会折叠为零

Basically in our example on the original question, the biggest margin-top is the one of the <h1>therefore taken and applied to the parent <div>.

基本上在我们关于原始问题的示例中，最大的 margin-top 是<h1>因此采取并应用于 parent 的一个<div>。

This rule is cancelled for:

取消此规则的原因有：

• Floated elements
• Absolutely positioned elements
• Inline-block elements
• Elements with overflow set to anything other than visible (They do not collapse margins with their children.)
• Cleared elements (They do not collapse their top margins with their parent block's bottom margin.)
• The root element

• 浮动元素
• 绝对定位元素
• 内联块元素
• 溢出设置为可见以外的任何元素（它们不会与其子元素折叠边距。）
• 已清除的元素（它们不会将其顶部边距与其父块的底部边距折叠起来。）
• 根元素

That is the reason why overflow:hiddensolved the issue.

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

Thanks @gaurav5430; here is the reference: http://reference.sitepoint.com/css/collapsingmargins

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

Also thanks to @Adrift that posted very good resources, although I found @gaurav5430's answer more straight forward and easier to understand.

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

回答by Andre Figueiredo

If element is the first child, it will add the margin-top to the parent element, collapsing with the margin-top of parent element.

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

The whysometimes margin does not collapse is clearly said in W3 collapsing-margins section.

该为什么有时保证金不垮在明确表示W3崩溃，利润部分。

I recommend using padding-top or this workaround: Margin on child element moves parent element, since overflow: hiddencan add collateral damage.

我建议使用 padding-top 或此解决方法：子元素上的边距移动父元素，因为overflow: hidden会增加附带损害。

see this example: fiddle

看这个例子：小提琴

HTML:

HTML：

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

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

CSS:

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;
}

回答by gaurav5430

here is a nice article, with a slight explanation

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

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

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

find this on the above link...

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

Collapsing Margins Between Parent and Child Elements

So far, we've only addressed the collapsing effect on adjacent elements, but the same process holds true for parents and children whose margins touch. By “touch,” we mean the places at which no padding, borders, or content exist between the adjacent margins. In the following example, a parent element has a child element on which a top margin is set:

h1 { margin: 0; background: #cff; } div { margin: 40px 0 25px 0; background: #cfc; } p { margin: 20px 0 0 0; background: #cf9; } In the style sheet above, you can see that a top margin value is declared for the p element, and in the code excerpt below, you can see that the p element is a child of the div element:

Heading Content

Paragraph content

The result of this code is illustrated in Figure 2.

Figure 2. Collapsing margins on a child paragraphAn illustration of collapsing margins between a h1 element and a div element with a child p element. There's a 40 pixel vertical gap between the h1 element and the paragraph content. You may have expected that the paragraph would be located 60px from the heading, since the div element has a margin-top of 40px and there is a further 20px margin-top on the p element. You may also have expected that 20px of the background color of the div element would show above the paragraph. This does not happen because, as you can see in Figure 2, the margins collapse together to form one margin. Only the largest margin applies (as in the case of adjoining blocks), as we've already seen.

In fact we would get the same result if our div element had no top margin and the p element had a 40px margin-top. The 40px margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page by 40px, leaving the p element nesting snugly at the top. No background would be visible on the div element above the paragraph. ...

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

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

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

标题内容

段落内容

此代码的结果如图 2 所示。

图 2. 折叠子段落的边距 h1 元素和带有子 p 元素的 div 元素之间的折叠边距的说明。h1 元素和段落内容之间有 40 像素的垂直间隙。您可能已经预料到该段落位于距标题 60px 的位置，因为 div 元素的 margin-top 为 40px，而 p 元素上还有 20px 的 margin-top。您可能还期望 div 元素的背景颜色的 20px 会显示在段落上方。这不会发生，因为正如您在图 2 中看到的那样，边距折叠在一起形成一个边距。正如我们已经看到的，只有最大的边距适用（如相邻块的情况）。

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

回答by Jeffery ThaGintoki

solving the problem with overflow:auto; ain't be good, have you tried to give an ID or CLASS to your div and then do this in ur CSS

用overflow:auto解决问题；不好，您是否尝试为您的 div 提供 ID 或 CLASS，然后在您的 CSS 中执行此操作

#divID{
padding:auto;
}

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

never use overflow cuz it may cause you more problems if you add a SELECT inside ur DIV, Good luck

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

There are three different ways in CSS you can dictate which elements you want to style. Each way is useful for a specific set of purposes, but by using all three together, you can really harness the cascading power of style sheets. The three methods of describing objects on a page are by their tag name, their ID, or their class.

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