一页网站中两个 div 之间的差距答案

【问题标题】：Gap Between Two Div's in One page web site一页网站中两个 div 之间的差距
【发布时间】：2016-01-30 04:37:48
【问题描述】：

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

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

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

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>

请帮忙。

添加编辑截图：

【问题讨论】：

你是什么意思？可以加个截图吗？
您可以增加#headerDiv padding-top 和增加#headerDiv 的高度。以及另一种使用 jqurey 的方式
@roNn23 添加截图
@JentiDabhi 问题不在于#headerDiv .. 它是#div1 和#div2 之间的差距
只需将 margin:0 添加到您的 h2

标签： html css

【解决方案1】：

将此添加到您的 h2

h2 {
margin:0;
}

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

【讨论】：

谢谢你..工作..我可以知道原因吗？
@SurajS 默认情况下，h2 具有顶部和底部边距。所以它会自动将所有东西推到它上面。删除边距会占用它在顶部添加的空间。所以它不会推动任何东西。我希望这是有道理的
see here
哦，谢谢@Philip.. 明白了
是的@jbutler483 谢谢

【解决方案2】：

如果我对您的理解正确，您希望 headerDiv 中的 <h1> 具有 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/

【讨论】：

【解决方案3】：

试试这个：

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

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

【讨论】：