CSS不需要的空白

Question

所以我创建了一个页面，并在全高的"div"标记中放置了一个"h1"标记。现在，当我出于某种原因在h1中添加一点"页边空白顶部"时，它在背景颜色应该是的地方创建了一个空白。请帮忙。是什么原因造成的？这是我的代码：

body {
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}           
#first-div{
height:100vh;
width:100%;
background-color:#E0EBE8;
}
#nav-bar {
background-color:#E0EBE8;
height:58px;
position:fixed;
top:0;
left:0;
width:100%;
}
.menu-link {
float:right;
text-decoration:none;
color:#008080;
font-size:115%;
margin-top:20px;
margin-right:107px;
}
.menu-link2 {
float:right;
text-decoration:none;
color:#008080;
font-size:115%;
margin-top:20px;
margin-right:52px;
}
#second-div {
height:100vh;
}
h1 {
margin-top:100px;
}
<div id="first-div">
<div id="nav-bar">
<a href="#" class="menu-link2">Contact</a>
<a href="#" class="menu-link">Work</a>
<a href="#" class="menu-link">About</a>
</div>
<h1>This is my heading</h1>
</div>
<div id="second-div">
</div>

Answer 1

h1的边距顶部为100px，这会将其从屏幕顶部向下推100 px。导航栏的高度只有58像素，中间还有42像素的空间，这是你不想要的空白。要么将导航栏的高度更改为100px，要么将h1的页边空白顶部更改为58px。

body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#first-div {
height: 100vh;
width: 100%;
background-color: #E0EBE8;
}
#nav-bar {
background-color: #E0EBE8;
height: 58px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.menu-link {
float: right;
text-decoration: none;
color: #008080;
font-size: 115%;
margin-top: 20px;
margin-right: 107px;
}
.menu-link2 {
float: right;
text-decoration: none;
color: #008080;
font-size: 115%;
margin-top: 20px;
margin-right: 52px;
}
#second-div {
height: 100vh;
}
h1 {
padding-top: 100px;
}

<div id="first-div">
<div id="nav-bar"> <a href="#" class="menu-link2">Contact</a> <a href="#" class="menu-link">Work</a> <a href="#" class="menu-link">About</a> </div>
<h1>This is my heading</h1>
</div>
<div id="second-div"> </div>