为什么子容器会影响父容器答案

【问题标题】：Why is child container affecting parent为什么子容器会影响父容器
【发布时间】：2016-09-20 15:03:46
【问题描述】：

我已经创建了this 简单的致敬页面，带有固定的背景图片。我想用文本内容来偏移容器（我为它创建了一个类：.main-content）稍微向下用margin-top: 130px，所以它没有粘在页面的最顶部。

<body>   <!-- applied background-image here -->
  <div class="darken">   <!-- dark overlay on the background image -->
    <div class="container-fluid">
      <div class="container main-content">    <!-- .main-content - has margin-top: 130px; applied -->
        <div class="row">
          <div class="col-lg-offset-2 col-lg-10">    <!-- Bootstrap centering -->
            <h1 class="display-1">St. Pope John Paul II</h1>   <!-- just another text below... -->
            <h2 class="display-4">Pope of the family</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-....... <!-- rest of the text -->

然而——奇怪的事情发生了——

.main-content {
margin-top: 130px;
}

margin 似乎会影响主体（根据 Chrome DevTools...）因此最终会影响（将 margin-top 应用于）具有 .darken 类的 div！

我想实现两件事：

让我的文本从页面顶部偏移
将.darken 类应用于整个视口

我怎样才能做到这一点？

CodePen link

【问题讨论】：

Margin on child element moves parent element的可能重复

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

请试试这个：

使用填充代替边距。

.main-content {
    padding-top: 130px;
}

【讨论】：

@Aziz 谢谢！我完全忘记了它们...... -_- 你能告诉我这次是哪两个元素正在折叠它们的边距吗？
所有.main-content 父级到body 标记的边距都折叠了，因为根据CSS2 spec：“没有行框、没有间隙、没有填充和没有边框把它们分开"。
@Aziz 这似乎合乎逻辑，感谢您的澄清，但有一件事似乎不合逻辑 - 为什么它移动了身体？这是否意味着当孩子的边距比父母大时，边距会从孩子“转移”到父母？
是的，就好像您将边距应用于父级一样。您可以通过将overflow: auto 添加到父元素或使用填充来分隔内部元素并保留边距以向元素的外侧添加空间来打破这一点。
我的错误，它适用于除 body/html 之外的顶级父级，在您的情况下为 .darken。