时间戳

首页 > 解决方案 > CSS不需要的空白

css - CSS不需要的空白

问题描述

所以我正在创建一个页面并将一个'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>

标签： csshtml

解决方案

您将 h1 的 margin-top 设置为 100 像素，这会将其从屏幕顶部向下推 100 像素。导航栏的高度只有 58 px，中间留有 42 px 的空间，这是你不想要的空白。要么将导航栏的高度更改为 100px，要么将 h1 的 margin-top 更改为 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>

推荐阅读