html - CSS - DIV 空白 - 'Margin/Padding set to 0px doesn' t 删除它'

Question

我正在尝试创建一个单页网站。在顶部的 div 上方，我有不需要的空白，每个 div 之间都有相同的空白(下面的屏幕截图)。正文选择器中的边距:0(根据其他问题的建议)确实删除了左侧、右侧和底部的空白区域。正文选择器中的 Padding:0 似乎没有任何作用。我还在 div 页面选择器中尝试了 margin-top: 0px，但它什么也没做。在 Chrome 和 Vivaldi 中显示相同。我想我错过了一些简单的东西，哈哈。

html,
body {
  background-color: white;
  margin: 0px;
  padding: 0px;
}
#nav {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 10px #000;
  position: fixed;
  margin: 0px;
  width: 190px;
}
#nav ul {
  color: white;
  list-style-type: none;
}
#nav ul a {
  color: #fff;
  font-family: "Metrophobic", Arial, serif;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.5s;
}
#nav ul a:active {
  color: #3498db;
}
#nav ul a:hover {
  color: #3498db;
}
#page1 {
  background-color: blue;
  height: 100%;
  height: 100vh;
}
#page2 {
  background-color: yellow;
  height: 100%;
  height: 100vh;
}
#page3 {
  background-color: green;
  height: 100%;
  height: 100vh;
}
#page4 {
  background-color: purple;
  height: 100%;
  height: 100vh;
}

<div id="nav">
  <ul>
    <li><a href="#home">HOME</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
    <li><a href="#work">WORK</a>
    </li>
    <li><a href="#contact">CONTACT</a>
    </li>
  </ul>
</div>
<div id="page1">
  <a id="home" class="smooth"></a>
  <h1>Home page content goes here.</h1>
</div>
<div id="page2">
  <a id="about" class="smooth"></a>
  <h1>About page content goes here.</h1>
</div>
<div id="page3">
  <a id="work" class="smooth"></a>
  <h1>Work page content goes here.</h1>
</div>
<div id="page4">
  <a id="contact" class="smooth"></a>
  <h1>Contact page content goes here.</h1>
</div>

Answer 1

您还需要删除 <h1> 的边距元素:

h1 {
    margin:0;
}

html,
body {
  background-color: white;
  margin: 0px;
  padding: 0px;
}
#nav {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 10px #000;
  position: fixed;
  margin: 0px;
  width: 190px;
}
#nav ul {
  color: white;
  list-style-type: none;
}
#nav ul a {
  color: #fff;
  font-family: "Metrophobic", Arial, serif;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.5s;
}
#nav ul a:active {
  color: #3498db;
}
#nav ul a:hover {
  color: #3498db;
}
#page1 {
  background-color: blue;
  height: 100%;
  height: 100vh;
}
#page2 {
  background-color: yellow;
  height: 100%;
  height: 100vh;
}
#page3 {
  background-color: green;
  height: 100%;
  height: 100vh;
}
#page4 {
  background-color: purple;
  height: 100%;
  height: 100vh;
}
h1 {
  margin: 0;
}

<div id="nav">
  <ul>
    <li><a href="#home">HOME</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
    <li><a href="#work">WORK</a>
    </li>
    <li><a href="#contact">CONTACT</a>
    </li>
  </ul>
</div>
<div id="page1">
  <a id="home" class="smooth"></a>
  <h1>Home page content goes here.</h1>
</div>
<div id="page2">
  <a id="about" class="smooth"></a>
  <h1>About page content goes here.</h1>
</div>
<div id="page3">
  <a id="work" class="smooth"></a>
  <h1>Work page content goes here.</h1>
</div>
<div id="page4">
  <a id="contact" class="smooth"></a>
  <h1>Contact page content goes here.</h1>
</div>