标题内容

Question

我现在已经找了一段时间来解决这个问题并且没有找到答案。在向元素添加边距顶部时，在我的情况下，它主要发生在标题上。在许多情况下，保证金顶部与父母共享。

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

虽然上一个例子解决了这个问题，但我不清楚为什么??? 。这与“崩溃边际”有关，显然边际与父母的边际相结合。但为什么????

我们如何知道父母什么时候会崩溃孩子的边缘，什么时候不知道，这个块的这个属性的目的是什么，或者它是一个bug？

这是问题的JSFiddle demo。

以下是解决方案的JSFiddle demo

感谢。

Answer 1

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

“简单来说，这个定义表明当两个元素的垂直边距接触时，只有具有最大边际值的元素的边缘将被尊重，而具有较小边距的元素的边缘将被接受。值将折叠为零

基本上在原始问题的示例中，最大的margin-top是<h1>因此采用并应用于父<div>。

此规则已取消：

浮动元素
绝对定位的元素
内联块元素
溢出设置为除可见之外的其他元素（它们不会与子项一起折叠边距。）
清除元素（它们不会使用父块的下边距折叠其顶部边距。）
根元素

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

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

同样感谢@Adrift发布了非常好的资源，虽然我发现@ gaurav5430的答案更直接，更容易理解。

Answer 2

如果element是第一个子元素，它会将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;
}

Answer 3

这是一篇很好的文章，有轻微的解释

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

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

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

到目前为止，我们只解决了邻近地区的崩溃问题   元素，但同样的过程适用于父母和孩子   其边缘接触。通过“触摸”，我们指的是没有的地方   相邻边距之间存在填充，边框或内容。在   在下面的例子中，父元素有一个子元素，其中一个   设置上边距：

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


标题内容

段落内容
  该代码的结果如图2所示。


图2.儿童段落上的折叠边缘图示   在h1元素和。之间折叠边距             带有子p元素的div元素。垂直方向有40像素             h1元素和段落内容之间的差距。您可能已经预计该段落距离的位置为60px   标题，因为div元素的边距为40px，并且有一个   p元素上的20px margin-top。你可能也有所期待   div元素的背景颜色的20px将显示在上面   这段落。这不会发生，因为您可以在图中看到   2，边缘一起崩溃形成一个边际。只有最大的   如我们已经存在的那样，保证金适用（如相邻区块的情况）   可见

事实上，如果我们的div元素没有顶部，我们会得到相同的结果   保证金和p元素的保证金率为40px。 40px保证金最高   p元素有效地成为div元素的上边距，   并将div向下推动40px，留下p元素   紧贴在顶部。 div上没有背景可见   该段上方的元素。 ...

Answer 4

解决溢出问题：auto;是不是很好，你试图给你的div一个ID或CLASS然后在你的CSS

#divID{
padding:auto;
}

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

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

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

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

4 个答案:

标题内容