Question

我正在尝试为我的学校项目模仿某种视差效果。我似乎只能解决1件事，那就是间距。

在页眉上方和图像上方无缘无故地留有空白。我知道将标题和main分开可以得到这条白线，但是我想知道如何摆脱两者的空白

body {
  height: 100%;
  margin: 0;
}

header {
  background-color: rgb(0, 0, 51);
  width: 100%;
  z-index: 999;
  height: 100hv;
}

.navigatie {
  list-style: none;
  text-align: center;
}

li {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 3.5em;
  font-family: 'Oswald', sans-serif;
}

a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

a:hover {
  color: rgb(204, 0, 0);
}

.foto1,
foto2,
foto3 {
  position: relative;
  opacity: 0.70;
  background-position: center;
  background-size: cover;
}

.foto1 {
  background-image: url("images/ik.png");
  height: 100vh;
  width: 100%;
}

.foto2 {
  background-image: url("images/ik.png");
  min-height 100%;
}

.foto3 {
  background-image: url("images/ik.png");
  min-height 100%;
}

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <title> - </title>

</head>

<body>
  <!--navigatie-->
  <header>
    <nav>
      <ul class="navigatie">
        <li> <a href="index.html"> home</a></li>
        <li> <a href="about.html"> about me</a></li>
        <li> <a href="contact.html"> contact</a></li>
        <li> <a href="artikel.html"> artikels</a></li>
      </ul>
    </nav>
  </header>


  <main>

    <!--foto 1 + text-->
    <div class="foto1">
      <div class="fototext1">

      </div>
    </div>

    <!--kolomtext-->

    <section class="sectie content1">
      <h1> Welkom op mijn website!</h1>
    </section>

    <!--foto 2 + text-->

    <div class="foto2">
      <div class="fototext2">

      </div>
    </div>

    <!--kolomtext-->

    <section class="sectie content2">
      <h1> Gewoon dingen!</h1>
    </section>

    <!--foto 3 + text-->

    <div class="foto3">
      <div class="fototext3">

      </div>
    </div>

    <!--kolomtext-->

    <section class="sectie content3">
      <h1> mooi toch?!</h1>
    </section>



  </main>



</body>

</html>

Answer 1

默认情况下ul标签的上，下边都有空白，因此请使用此CSS重置样式。

ul.navigatie {
    margin: 0;
}

Answer 2

使用通配符删除CSS文件开头所有内容的所有空白

* {
    margin: 0;
}

如何清除标题，视口顶部和第一张图像之间的空白？

2 个答案: