html - 一页网站中两个 Div 之间的差距

Question

我正在尝试创建这个包含不同 100% 宽度的 div 的页面。

但是，当我在 div 顶部插入“h2”时，它会在两个 div 之间产生间隙。

分配上边距消除了这个差距，但我只想在顶部使用“h2”。

这里是 JSFiddle

HTML:

html,
body {
  height: 100% !important;
  width: 100% !important;
  margin: 0px;
  padding: 0px;
}
.mainDiv {
  height: 500% !important;
  width: 100% !important;
}
.page {
  height: 20% !important;
  width: 100% !important;
  text-align: center;
}
#headerDiv {
  height: 15%;
  position: fixed;
  background-color: #7f4c76;
  width: 100%;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}
#div1 {
  padding-top: 5%;
  background-color: #334960;
}
#div2 {
  background-color: #f17c72;
}
#div3 {
  background-color: #32ac97;
}
#div4 {
  background-color: black;
}
#div5 {
  background-color: yellow;
}
h1 {
  color: #E6E6E6;
  margin-left: 50px;
  font-family: "MS Sans Serif", Geneva, sans-serif;
  font-size: 300%;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}
h2 {
  color: #E6E6E6;
  font-weight: normal;
  font-family: 'Signika', sans-serif;
  font-size: 300%;
}

<div class="mainDiv">
  <div id="headerDiv">
    <h1>CSS3 Demo </h1>
  </div>
  <div id="div1" class="page">
    <h2>Text Effects Demo</h2>
  </div>
  <div id="div2" class="page">
    <h2>Transition Demo</h2>
  </div>

  <div id="div3" class="page">
    <h2>Animation Demo</h2>
  </div>

  <div id="div4" class="page">
    <h2>Multiple Columns</h2>
  </div>

  <div id="div5" class="page">
    <h2>Multiple Columns</h2>
  </div>
</div>

请帮助。

添加编辑截图:

Answer 1

将此添加到您的 h2

h2 {
margin:0;
}

你的问题是你的 div 有一个默认边距，可以使用这个样式覆盖它