Html 在我的网页主体上应用90px的虚拟边距？

在为我的站点创建登录页面时，我在登录表单div中添加了一个90px的边距（id为“login”），以使其远离标题。 这个过程适用于我网站的所有其他页面，但不适用于这个页面

问题是，整个主体从窗口顶部获得了90px的余量，而不仅仅是LogIn div

似乎是login.css的第7行造成了问题，因为当我删除它时，一切都恢复正常，但登录表单仍然被标题隐藏

非常感谢您的帮助，如果您需要更多信息，请一定询问

此外，如果您希望看到该网站的运行，这里还有一个指向该网站的链接：

login.css：

@charset "utf-8";

#LogIn {
    display: block;
    background-color: #fff;
    padding: 0 20 10 100;
    margin-top: 90px;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    height: auto;
    width: auto;
    vertical-align: middle;
    font-family: sans-serif;
    color: #292f33;
}

.login-field {
    display: block;
}

#LogIn input{
    display: inline-block;
    margin: 0 0 10 0;
    padding: 5;
    width: 350;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
}

#forgotPW {
    color: #1b95e0;
    cursor: pointer;
    font-size: 15;  
}

#DroppingBox {
    background-color: #eee;
    height: auto;
    border-radius: 0 0 5px 5px;
    padding: 10 0 10 100;
    font-family: sans-serif;
    font-size: 13;
    color: #666;
    border-left: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
}

#DroppingBox a {
    color: #1b95e0;
    cursor: pointer;
}

#SignUp {
    display: none;
}

#SignUp input[type="text"], #SignUp input[type="password"] {
    display: block;
    clear: right;
    margin: 0 0 5 0;
    padding: 5;
    width: 350;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
}

/*#SignUp input[type="password"] {
    display: block;
    clrar: right;
    margin: 0 0 5 0;
    padding: 5;
    width: 350;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
}

#SignUp input[type="submit"] {
    float: left;
    color:red;
}*/

.error {
    border: 1px solid red !important;
}

.errortext {
    display: inline-block;

    color: red;
}

@media screen and (max-width: 640px) {

    #LogIn {
        padding: 0 10 1 10;
    }

    #LogIn input[type="text"]{
        width: 100%;
    }

    #LogIn input[type="password"]{
        width: 100%;
    }

    #DroppingBox {
        padding: 5 10 5 10;
    }

    #SignUp {
        padding: 0;
    }

    #SignUp input[type="text"], #SignUp input[type="password"] {
        width: 100%;
    }

}

更改#登录以删除上边距：

#LogIn {
  display: block;
  background-color: #fff;
  /* margin-top: 90px; causing problem */
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(0,0,0,0.1);
  border-bottom: none;
  height: auto;
  width: auto;
  vertical-align: middle;
  font-family: sans-serif;
  color: #292f33;
}

---

您必须在

#登录

div:

#LogIn {
    display: block;
    background-color: #fff;
    padding: 0 10px;
    margin-top: 120px;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    height: auto;
    width: 100%;
    vertical-align: middle;
    font-family: sans-serif;
    color: #292f33;
    float: left;
}

---

感谢您的快速回复，但是如果我去掉这一行，标题下的登录表单将只保留在标题下，而不是在视图中。此外，这仍然无法解释为什么当90像素的边距被定义为id时，整个网页都会出现这种情况？登录任何想法？这很有效！它总是很简单，尽管你知道为什么没有“float:left”它会影响整个网站吗？非常感谢您的解决方案，这帮我省去了很多麻烦！你的html结构不是很好，只是很难修复。你可以在这里查看一些关于浮动元素的文档啊，我想这可能是问题所在，我正在使用我为几个不同网站制作的PHP文件，关于如何清理它有什么建议吗？我建议你使用引导。重置你的项目并使用我认为这对HTML初学者来说是一个很好的观点。这就是所谓的折页边距-

#LogIn {
  display: block;
  background-color: #fff;
  /* margin-top: 90px; causing problem */
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(0,0,0,0.1);
  border-bottom: none;
  height: auto;
  width: auto;
  vertical-align: middle;
  font-family: sans-serif;
  color: #292f33;
}

#LogIn {
    display: block;
    background-color: #fff;
    padding: 0 10px;
    margin-top: 120px;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    height: auto;
    width: 100%;
    vertical-align: middle;
    font-family: sans-serif;
    color: #292f33;
    float: left;
}