html - 黑色空间全方位网站

我正在研究一个投资组合，并且一直在修改主页上的CSS。我已经清理了CSS，但是不知何故，我的首页（黑色空间）的顶部和底部都有很大的空隙，我认为这可能与将背景尺寸设置为包含。但是我不想更改它，因为图像拉伸得太多了（我喜欢现在的位置）。

这是我的代码：

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

*{
  margin: 0;
  padding: 0;

}
#wrapper {
  margin: 0 auto;
  padding: 0;
}

#background {
  background-image:url("images/Untitled-1.jpg");
  background-repeat:no-repeat;
  background-size:contain;
}

header{
  background: rgb(115, 78, 116);
}

p{
  width: 20%;
  font-size: 20px;
  color: antiquewhite;
  padding: 0;
  margin: 0 auto;
  position:absolute;
  margin-left: 50%;
  font-family: 'Fira Sans', sans-serif;
  font-style: normal;
  margin-top: 15%;

}

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

footer{
  color: antiquewhite;
  margin: 0;
  padding: 0;
}


h1{font-family:'Fjalla One', sans-serif;
  color: floralwhite;
  font-size: 300%;

}

nav {
  margin-left: 80%;
  margin-bottom: 40%;

}
.stretch{
  padding: 20px;
  margin: 20px 0px;
  border-radius: 50px 0px 0px 50px;
  width: 250px;
  height: 50px;
  text-align: center;
  text-shadow: 2px 2px black;
  font-size: 150%;
  font-family: 'Fjalla One', sans-serif;
  background-color: rgb(40, 31, 17);
  position: relative;
  -webkit-transition-duration: 0.5s;
  /*    standard syntax*/
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  /*    standard syntax*/
  transition-property: transform;
}
/* tabs will extend to left slightly*/
.stretch:hover { -webkit-transform: translateX(-20px);
  /*    standard syntax*/
  transform: translateX(-20px);
}

a:link {
  text-decoration: none;
  color: antiquewhite;
}

a:visited {
  text-decoration: none;
  color: antiquewhite;
}

a:hover {
  text-decoration: none;
  color: antiquewhite;
}

a:active {
  text-decoration: none;
  color: antiquewhite;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="wrapper">
  <header>
    <h1>Tavyon Richardson</h1>
    <ul class="icon">
      <li><span class="list">[email protected]</span><i class="material-icons">mail_outline</i></li>
      <li><span class="list">989-285-5133</span><i class="material-icons">call</i></li>
      <li><span class="list">Alma, Michigan</span><i class="material-icons">location_on</i></li>
    </ul>
  </header>
  <div id="background">
    <p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
    <nav id="navbar">
      <ul class="nav">
        <li class="stretch"><a href="">About me</a></li>
        <li class="stretch"><a href="">Courses</a></li>
        <li class="stretch"><a href="http://tavyonrichardson.com/projects.html">Projects</a></li>
        <li class="stretch"><a href="http://tavyonrichardson.com/nms_114/blog">Blog</a></li>
        <li class="stretch"><a href="">Resume</a></li>
      </ul>
    </nav>
  </div>
</div>

最佳答案

看不到背景，所以不确定，但我认为问题出在边际


将margin-top:0添加到h1上的header
删除（或更改值）margin-bottom的nav属性

关于html - 黑色空间全方位网站，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40986760/