如何摆脱标题，视口顶部和第一张图像之间的空白？ [复制]答案

【问题标题】：How to get rid of white space between the header, top of the viewport and the first image? [duplicate]如何摆脱标题，视口顶部和第一张图像之间的空白？ [复制]
【发布时间】：2023-04-07 03:50:01
【问题描述】：

我正在尝试为我的学校项目模拟某种视差效果。只有一件小事我似乎无法修复，那就是间距。

标题上方无缘无故有空白，图片正上方也是如此。我知道将标题和主分开会给你这个白线，但我想知道如何摆脱 both 空格

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>

【问题讨论】：

我的猜测是它可能是某处的填充。如果您使用的是 chrome，您可以按 F12，如果您在显示的窗口左上角单击一个看起来像鼠标的按钮，您可以将鼠标悬停在元素上并查看它们的填充和边距。

标签： html css

【解决方案1】：

默认情况下 ul 标签有上下边距，所以使用这个 css 来重置样式。

ul.navigatie {
    margin: 0;
}

【讨论】：

你可以分享链接，以便我可以帮助你。
@vorkot1 这是因为您没有像上面发布的代码那样从身体上删除边距
@vorkot1 你身上有同样的东西：margin :0

【解决方案2】：

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

* {
    margin: 0;
}

【讨论】：

你为什么要这样做？它很昂贵，而且事情应该有其自然的利润 - 只需覆盖你不想要的那些