在一个页面网站中的两个Div之间的差距

Question

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

但是，当我插入＆＃39; h2＆＃39;在div的顶部，它创造了两个div之间的差距。

指定上边距可以消除这个差距，但我想要＆＃39; h2＆＃39;只在顶部。

此处JSFiddle

HTML：

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请帮助。

编辑截图添加：

Answer 1

将此添加到您的h2

h2 {
margin:0;
}

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

Answer 2

如果我理解正确，您希望<h1>中的headerDiv拥有margin-top:0px;，如果这是您想要的，那么修复很简单：

#headerDiv h1 {
    margin-top:0px;
}

或者，如果您希望它只是headerDiv的直接后代，您可以执行以下操作：

#headerDiv > h1 {
    margin-top:0px;
}

在这里，您可以找到更新的小提琴：http://jsfiddle.net/s0p8ogdb/3/

在看到最近添加的屏幕截图后，您可以通过制作page课程display:inline-block来解决此问题，这里有一个更新的小提琴：http://jsfiddle.net/s0p8ogdb/4/

Answer 3

试试这个：

h2 {
    color: #E6E6E6;
    font-weight: normal;
    font-family: 'Signika', sans-serif;
    font-size: 300%;
    margin-top:0;

}
#div1 h2 {
    padding-top: 1em
}