摆脱div之间的空白

Question

示例：https://jsfiddle.net/u2p7fbkm/

HTML：

<div id="alt-color">
    <p> First</p>
</div>

<div id="main-color">
    <h2>Second</h2>
</div>

CSS：

#alt-color {
  background-color: rgba(0, 0, 255, 1);
}
#main-color {
  background-color: rgba(255, 0, 0, 1);
}

如何删除示例中 div（第一个和第二个）之间的空格？基本上我想要这样的东西：

Answer 1

h2 和 p 以及其他像 h1 的标签默认有边距（顶部和/或底部）。只需使用 css 删除边距。

作为建议，始终使用每个浏览器提供的开发工具（右键单击 -> 检查元素）并检查应用于元素的样式。将来会为您节省很多时间。

#alt-color{
  background-color: rgba(0, 0, 255, 1);

}
#main-color{
  background-color: rgba(255, 0, 0, 1);
}

p, h2 {
 margin:0
}

  <div id="alt-color">
    <p> First</p>
  </div>

  <div id="main-color">
    <h2>Second</h2>
  </div>

Answer 2

h2 和 p 标签有边距。使用 margin: 0 删除它们：

#alt-color {
  background-color: rgba(0, 0, 255, 1);
}
#main-color {
  background-color: rgba(255, 0, 0, 1);
}
p, h2{
  margin:0;
}

<div id="alt-color">
    <p> First</p>
</div>

<div id="main-color">
    <h2>Second</h2>
</div>

或者：

#alt-color {
  background-color: rgba(0, 0, 255, 1);
}
#main-color {
  background-color: rgba(255, 0, 0, 1);
}
div{
  overflow:auto;
}

<div id="alt-color">
    <p> First</p>
</div>

<div id="main-color">
    <h2>Second</h2>
</div>