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

由 oqui发布于 2020-05-09 11:56:22

我试图让标题背景图片到达视口顶部。我的图像顶部和视口顶部之间存在间隙，我想对其进行修复。我尝试对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的PADDING可以解决此问题，而尝试添加0px的MARGIN（边距：0px 0px 0px 0px 0px）却无济于事？我认为应该设置边距来使元素离视口的边缘越来越近。我很惊讶填充解决了我的问题，而不是保证金。谢谢！

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

不安青春

2020-05-09 11:56:22

实际上，边距被认为是在元素的外部，相邻项目的边距将重叠，但是，另一方面，填充被认为是在元素的内部。因此，当元素边距区域是该元素与其周围的元素之间的空间时，元素的填充区域确实是其内容与其边界之间的空间。

因此，让我们看一个例子。

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>

So as you can see in the example adding padding to each box will result in growing them in padding area, this will work the same for images. Consider the following image as a content box, whenever you add padding it will apply to the innermost part of a box, and whenever you add margin it will apply to the outermost part of a box.

记忆狠清晰

2020-05-09 11:56:22

Try to use display:block instead of doing padding and margin.

或您需要使用它。

*{
   margin:0;
   padding:0
}

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

}

oqui

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3274
注册排名
1742