Question

我正在使用一个网站，我通常用标题，内容和页脚划分它们。当我想在我的内容/登录和我的标题之间添加更多空格时，我遇到了一些问题......

当我只是将margin-top: 100px;添加到content或login时，它也会推倒我的footer，我不希望这样。如何在不推翻login的情况下降低footer？

在此图片中，您可以看到我的内容中有足够的空间让登录信息失效。

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>

Answer 1

而不是边距给出填充

更改.content类的css ......它会起作用

＆＃13;

	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
	{
		padding : 25% ;
		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;
	}

＆＃13;

<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>

＆＃13;

Answer 2

你可能需要做两件事：

将此行添加到CSS的顶部：* { box-sizing: border-box; }。它将确保填充不会影响元素的高度或宽度。

然后在.content上添加您需要的padding，而不是margin。这对你有用：）

Answer 3

因为您使用了每个元素的总高度的百分比。如果你在其中一些之前放置一个空格，它们的高度将保持不变，其他元素将被推下。

您可以使用padding代替margin，填充位于元素内部，并在元素限制及其内容之间定义空格。

margin-top正在推倒我的页脚

3 个答案: