Question

因此，我正在创建一个页面，并将'h1'标签放入全高'div'标签内。现在，由于某种原因，当我去给h1添加一些'margin-top'时，它创建了一个空白，背景颜色应该是空白。请帮忙。是什么原因造成的？这是我的代码：

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的边距顶部设为100像素，这会将其从屏幕顶部向下推100像素。导航栏的高度仅为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>

CSS多余的空格

1 个答案: