在 css 中添加没有顶部边距的背景

Question

当使用 CSS 添加我的背景图片时，我发现顶部和侧面似乎有一个 margin。

我尝试添加 padding: 0; margin: 0; 和 left: 0px; top: 0px; 但这并没有解决问题。

这是我的 html

#header {
  background: url(logo.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  padding: 0;
  margin: 0;
  background-size: cover;
  left: 0px;
  top: 0px;
}

<div id="header">
  <h1>Hello World!</h1>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>

</div>

Answer 1

问题可能是 body 元素有一些边距或填充。

尝试添加这个：

html, body {
    margin: 0;
    padding: 0;
}

Answer 2

每个浏览器都默认应用一些内置样式。其中一种样式是 body 元素上的边距。

尝试添加这个：

body {
  margin:0;
}

Answer 3

body 和标题（<h1> 到 <h6>）默认为 margin，因此您需要重新设置它

body,
h1 {
  margin: 0
}
#header {
  background: url(//placehold.it/1600x900) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

<div id="header">
  <h1>Hello World!</h1>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>
  <p>The background-image is fixed. Try to scroll down the page.</p>

</div>

Answer 4

您应该通过在 css 中添加以下行来覆盖浏览器的默认设置：

html, body {
   margin: 0;
   padding: 0;
}

这对你的情况没有帮助 因为你还需要添加：

#header {
   overflow:auto;
}

因此 <h1> 不会将他的 parent div 推低，但会按照您的意愿保持他的边距。

在 css 中添加没有顶部边距的背景

Adding a background that has no top on side margin in css

html

css

background-image