边距-顶部推外部 div 向下

在包装器 div 中，头 div 作为第一个元素，但是当我向头 div 中的 h1添加上边距时，它会将整个头 div 向下推。我意识到，每当我在页面上的第一个可见元素上应用顶部边距时，就会发生这种情况。

下面是一个示例代码片段。谢谢！

div#header{
width: 100%;
background-color: #eee;
position: relative;
}


div#header h1{
text-align: center;
width: 375px;
height: 50px;
margin: 50px auto;
font-size: 220%;
background: url('../../images/name_logo.png') no-repeat;
}
<div id="header">
<h1>Title</h1>
<ul id="navbar"></ul>
</div>

84472 次浏览
小开

对于为什么会发生这种情况，我没有一个确切的解释，但是我已经通过将 top-margin改为 top-padding，或者将 display: inline-block添加到元素样式来解决这个问题。

编辑: 这是我的理论

我有一种感觉，这与利润率的崩溃(合并)有关。

来自 W3C 崩溃边际:

在这个规范中，表达式 崩溃的边缘意味着 邻接边距(非空) 内容、填充物或边框区域或 间隙)的两个或 更多的盒子(可能在一个盒子旁边) 另一个或嵌套的)组合形成一个 单边界。

我的理论是，由于第一个元素在主体旁边，所以两个边距结合起来应用于主体: 这迫使主体的内容从应用的折叠边距下面开始，以符合 盒子模型。

有些情况下，利润率不会崩溃，这可能值得一试(来自 崩溃的边际) :

* 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
小开
最佳答案

将 overflow:auto放在父 div中
更多详情请参阅此连结

小开

这是一些避免父子元素之间边距崩溃的方法。选择一个更适合你其他造型的:

  • 将 display设置为 block以外的值。
  • 将 float设置为 none以外的值。
  • 删除边距，改为使用 padding。例如，如果您有 margin-top: 10px，替换为 padding-top: 10px;。
  • 删除边距，使用具有 top、 bottom等属性的 position(absolute或 relative)。例如，如果你有 margin-top: 10px，替换为 position: relative; top: 10px;。
  • 在边距折叠的一侧向 家长元素添加 padding或 border。边框可以是1px 和透明的。
  • 将 overflow设置为 visible以外的 家长元素。
小开

今天碰到这个问题。

当后面跟着更多的元素时，overflow: hidden没有像预期的那样工作。

因此，我尝试更改父 div 的 display 属性，而 display: flex起作用了! ! ！

希望这能帮到某人。 :)

小开

在父元素顶部添加一点点填充就可以解决这个问题。

.parent{
padding-top: 0.01em;
}

如果您需要父元素内部的一个元素在父元素之外是可见的，比如您正在创建一个重叠效果，那么这非常有用。

小开

display: flex将在这种情况下工作。给父元素 display: flex;，然后根据您的要求给 h1标记留出空白。

小开

我知道这是个老问题，我遇到过很多次。问题是，这里所有的修复都是可能有意外后果的黑客攻击。

首先，对于根本问题有一个简单的解释。由于边距折叠的工作方式，如果容器内的第一个元素具有顶部边距，那么该顶部边距将有效地应用于父容器本身。您可以通过执行以下操作来自行测试:

<div>
<h1>Test</h1>
</div>

在调试器中，打开此文件并将 div 悬停。您会注意到，div 本身实际上位于 H1元素 停止的顶部边距处。此行为由浏览器指定。

所以这里有一个简单的解决方法，不需要求助于奇怪的黑客，就像这里的大多数帖子所做的那样(没有侮辱的意思，这只是事实)-简单地回到最初的解释-...if the first element inside a container has a top margin...-接下来，因此你需要一个容器中的第一个元素来使 没有有一个上边距。好的，但是如何在不添加不会影响文档语义的元素的情况下实现这一点呢？

简单! 伪元素! 你可以通过一个类或者一个预定义的混合元素来实现。添加一个 :before伪元素:

CSS 通过一个类:

.top-margin-fix::before {
content: ' ';
display: block;
width: 100%;
height: .0000001em;
}

这样，按照上面的标记示例，您可以像这样修改 div:

<div class="top-margin-fix">
<h1>Test</h1>
</div>

为什么会这样？

容器中的第一个元素(如果没有顶部边距)设置下一个元素的顶部边距的起始位置。通过添加一个 :before伪元素，浏览器实际上在父容器 之前中添加了一个非语义(换句话说，有利于 SEO)元素，这是第一个元素。

为什么高度: .0000001 em？

A.浏览器向下推边距元素需要一个高度。这个高度实际上为零，但它仍然允许您向父容器本身添加填充。因为它实际上是零，所以它也不会对容器的布局产生影响。真漂亮。

现在您可以添加一个类(或者更好，在 SASS/LESS 中，添加一个 Mixin!)解决这个问题，而不是添加奇怪的显示样式，这会导致意想不到的后果时，你想要做其他事情的元素，有目的地消除元素的边距和/或替换为填充，或奇怪的位置/浮动样式，真的不是为了解决这个问题。

小开

这是由于保证金崩溃造成的。 当子元素接触到父元素的边界时，如果其中任何一个元素应用了边距，那么:

  1. 最大的差额将获胜(申请)。

  2. 如果他们中的任何一个有保证金，那么他们将分享相同的。

解决方案

  1. 将边框应用于父母，使父母和子女分开。
  2. 将填充应用于父级，使父级和子级分开。
  3. 应用溢出而不是在父级上可见。
  4. 使用之前或之后在父 div 中创建虚拟元素，该元素可以区分应用的子元素和父元素的边距。
  5. 在应用的子元素和父元素之间创建一个 html 元素也可以将它们分开。

提交答案