背景图像覆盖整个屏幕但有一个奇怪的边距答案

【问题标题】：Background image covers entire screen but there is a strange margin背景图像覆盖整个屏幕但有一个奇怪的边距
【发布时间】：2019-10-26 01:14:47
【问题描述】：

我定义了一个 div 来设置背景中的图像以覆盖整个屏幕。但是有一个奇怪的边缘，我无法摆脱。

我查看了代码，没有发现任何表明我设置了这些边距的信息。当在 css 类中将位置设置为固定时，图像是这样的：

但是当我不将位置设置为“固定”时，它看起来像这样：

app.component.html

<main>
    <router-outlet></router-outlet>
</main>

login.component.html

<div class="back">
<form action="" method="post" class="form">
    <img src="../../../assets/toolbar_logo_blue.png" alt="logo" style="width: 100%;max-width: 500px">

  <div class="container">
    <label><b>Email</b>
    <input type="text" placeholder="Digite seu email" name="uname" required>
    </label>
    <label>
      <b>Senha</b>
    <input type="password" placeholder="Digite sua senha" name="psw" required>
    </label>
    <button type="submit" class="loginbutton">Logar como: <h4 style="display: inline-block; color: darkcyan;padding: 5px"> Clínica</h4></button>
    <div>
    <label class="switch">
      <input type="checkbox" checked="checked" name="type">
      <span class="slider round">
    </span>
    </label>
    </div>
  </div>
</form>
</div>

login.component.css

.form {
  background-color: transparent;
  border: #2196F3;
  padding: auto;
  margin: auto;
  justify-content: center;
  width: 50%;
  display: block;
  height: 50%;
  text-align: center;
  clear: both;

}

.back {
  background: url("../../../assets/background_paper.jpg")  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
}


/* Add padding to containers */
.container {
  padding: 16px;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.container2 {
  background-color: rgba(0, 3, 115, 0.21);
  float: right;
  text-align: center;
}

.loginbutton {
  background: cornflowerblue;
  opacity: 0.8;
  border-radius: 10%;
  /*width: 10%;*/
  color: black;
  /*height: 10%;*/
}

我知道内联样式，我稍后会外包。

【问题讨论】：

你确定白色的“边距”实际上不是图像本身的一部分吗？
好电话，但我刚刚检查过，事实并非如此。要检查我已将背景设置为某种颜色而不是图像，并且边距是相同的。

标签： html css angular typescript

【解决方案1】：

事实证明，我现在只是将边距设置为 -8px，它就成功了。使用 chrome 开发人员工具，我发现它是 html 元素中 8px 的边距集，但我找不到它在代码中声明。感谢您的回答和cmets。

【讨论】：

【解决方案2】：

如果您没有使用normalize 或Eric Meyers Reset 等重置样式表，则需要覆盖浏览器默认设置。

body {
  margin: 0;
}

【讨论】：

在<form> 元素上可能相同，因为默认情况下它可能有一些间距。 form { margin: 0; padding:0}
是的，对容器类的填充也很好奇。但我有一种预感，这是浏览器的默认设置。
我认为你可能是对的。自从我在没有重置的情况下做了任何事情以来已经很久了，以至于我忘记了默认值是什么。 <form> 似乎是那种默认会有填充或边距的东西。
设置正文的边距/内边距不起作用，无论是窗体还是容器类上的内边距。