我正在处理一个网站，我通常用页眉、内容和页脚来划分它们。当我想在我的内容/登录名和标题之间添加更多空间时，我遇到了一些问题...
当我简单地添加 margin-top: 100px; 到 content 或 login 时，它也会压低我的 footer，我不想要那个。如何在不降低 footer 的情况下降低 login？
在此图像中，您可以看到我的内容中有足够的空间用于登录。 
Body {
margin: 0;
background-image: linear-gradient(to right, #0098d9, #0098d9 49%, #ed1b24 49%);
font-family: Verdana;
}
.MainDiv {
width: 80%;
min-height: 800px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.header {
text-align:center;
margin:0px auto;
width: 100%;
height: 20%;
}
.content {
margin-top: 0px;
margin-bottom: 0px;
height: 65%;
}
.footer {
height: 15%;
text-align: center;
font-size: 12px;
}
.login {
width: 30%;
height: 30%;
margin-left: auto;
margin-right: auto;
background: #0098d9;
border: 0.1em solid #0098d9;
border-radius: 1em;
text-align: center;
}<body>
<div class="menu">
Menu:<br />
<a href="Overview.php">Machine pages</a>
</div>
<div class="Maindiv">
<div class="header">
logo here
</div>
<div class="content">
<form action="Index.php" method="post" enctype="multipart/form-data">
<div class="login">
<table class="loginTable">
<tr>
<td align="center" colspan="2">Admin login</td>
</tr>
<tr>
<td width="10px"><img class="icon" src="images/User.png"></td>
<td><input type="text" name="Username" placeholder="Username"</td>
</tr>
<tr>
<td><img class="icon" src="images/locked.png"></td>
<td><input type="password" name="Password" placeholder="Password"></td>
</tr>
<tr>
<td colspan='2' align="right"><input type="submit" name="Login" value="Login"></td>
</tr>
</table>
</div>
</form>
<p class="errorMessage"><?php echo $message;?></p>
</div>
<div class="footer">
Machinefabriek van de Weert B.V. <br />
W: <a href="http://www.vandeweert.nl">www.vandeweert.nl</a><br />
T: +31 (0)492-549 455
</div>
</div>
</body>最佳答案
您可能需要做两件事:
将此行添加到 CSS 的顶部:* { box-sizing: border-box; }。
它将确保填充不会影响元素的高度或宽度。
然后在 .content 上添加您需要的 padding，而不是 margin。这对你有用:)
关于html - css margin-top 压低了我的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33104325/