我在div中有一个h1标签，我希望它从div的顶部向下推。我尝试在 h1 上添加上边距，但这无济于事。当我在div '#contact' 中放入一些文本时，h1 突然向下移动。有没有办法将 h1 向下移动，而"#contact"中没有文本？提前谢谢你。
片段：
<div style="float:left; margin: 0; width: 100%;background-color:#eeeeee;font-size: 20px;color: #252a30;text-align: center;">
<style>
.half {
width: 40%;
margin: 3%;
font-size: 0.7em;
display: block;
}
.hl {
text-align: left;
float: left;
}
.hr {
text-align: right;
float: right;
}
.project-tags {
color: #b2c6cd;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
opacity: 1;
text-transform: uppercase;
}
.half ul, .half h1 {
margin-bottom: 0px;
margin-top: 0px;
}
.half h1 {
margin-bottom: 5px;
}
.project-tags li {
color: #fed766;
}
.project-tags span {
color: #b2c6cd;
}
.half p {
font-weight: 300;
font-size: 20px;
}
.button-primary {
margin: 10px 0 60px;
color: #252a30;
background-color: rgba(0, 0, 0, 0);
border: 2px solid #FED766;
height: auto;
font-size: 1rem;
line-height: normal;
text-transform: uppercase;
font-weight: 700;
transition: all .3s ease-in-out;
letter-spacing: 0;
border-radius: 50px;
display: inline-block;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
outline: 0;
padding: 1.0rem 3.0rem;
}
.button-primary:hover {
color: #FED766;
background-color: #252a30;
border: 2px solid #252a30;
padding: 1.0rem 3.5rem;
}
.on-ylw {
border: 2px solid #252a30;
}
</style>
<p id="projects"></p>
<h1>My Projects</h1>
<p style="font-weight: 300;">Examples of my work</p>
<div class="projects" style="margin: 0 15%;">
<div class="half hl">
<h1>Text</h1>
<ul class="project-tags">
<li><span>Python</span></li>
</ul>
<p>Text</p>
<a href="link" class="button-primary">Visit Website</a>
</div>
<div class="half hr">
<img src="image" alt="link" style="border-radius: 10px;position: relative: width: 100%; border-style: none;">
</div>
</div>
</div>
<div style="margin: 0; width: 100%; background-color: #FED766;position: static;">
<div id="contact"></div>
<br>
<br>
<h1 style="text-align: center; font-weight: bold; color: #000000; font-size: 40px;">Want To Contact Me</h1>
<p style="text-align: center; font-weight: 300; font-size: 25px; color: #000000;">I'm currently accepting new projects and would love to hear about yours.</p>
<br>
<button class="button-primary on-ylw" style="display: table; margin: 0 auto;">Contact Me</button>
<br>
<br>
</div>添加：
clear: both;
属性到 H1 所在的<div>。 你拥有的 DOM 浮动的div：左;因此，它实际上并不在您期望的 DOM 中。
然后，您应该能够按预期将马良性顶部添加到H1中。