Question

我创建了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;
}

保证金似乎影响身体（根据Chrome DevTools ...）因此最终影响（将margin-top应用于）.darken类的div！

我想实现两件事：

让我的文字偏离页面顶部
将.darken类应用于完整视口

我如何实现这一目标？

CodePen link

Answer 1

请试试这个：

而不是使用边距填充。

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

为什么子容器会影响父级

1 个答案: