用填充或边距将背景图像扩展到视口顶部？

Question

我试图使标题背景图像到达视口顶部。我的图像顶部和视口顶部之间有一个缝隙，我想修复它。我尝试对<header> CSS加上边距，但这无济于事。 DID最终的工作是应用填充。

 header {
      text-align: center;
      background: url("https://i.imgur.com/E4yIQba.jpg");
      background-size: cover;
      color: white;
      padding: 1px 0px 0px 0px;

    }

现在一切看起来都很好，但是没有人知道为什么在图像顶部添加1px的填充可以解决该问题，而尝试添加0px的margin（边距：0px 0px 0px 0px）却无济于事吗？我认为边缘应该使元素越来越远离视口的边缘。我很惊讶填充解决了我的问题，而不是保证金。谢谢！

https://dash.generalassemb.ly/docmp0/build-your-own-blog-theme

Answer 1

实际上，边距被认为是元素之外，并且相邻项目的margin s会重叠，但是另一方面， padding s 因此，实际上，当元素padding的区域是元素和周围元素之间的空间时，元素的margin区域就是其内容和边框之间的空间。它。

所以让我们看一个例子。

div.container {
  display: flex;
  justify-content: space-between;
}

div.box>div {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  text-align: center;
}

div.padding>div {
  padding-top: 1rem;
}

div.margin>div {
  margin-top: 1rem;
}

<div class="container">

  <div>
    <h3>Default</h3>
    <div class="box">
      <div>box A</div>
      <div>box B</div>
      <div>box C</div>
    </div>
  </div>

  <div>
    <h3>padding-top: 1rem;</h3>
    <div class="box padding">
      <div>box A</div>
      <div>box B</div>
      <div>box C</div>
    </div>
  </div>

  <div>
    <h3>margin-top: 1rem;</h3>
    <div class="box margin">
      <div>box A</div>
      <div>box B</div>
      <div>box C</div>
    </div>
  </div>
</div>

因此，如您在示例中看到的，将padding添加到每个框中将导致它们在padding区域中增长，这对于图像来说将是相同的。

将以下图像视为内容框，每当添加填充时，它将应用于框的最内部；每当添加边距时，它将应用于框的最外部。

注意：了解有关padding和margin的更多信息。