H1导致div之间的差距

Question

.heads和.container1之间存在差距，与h1标签有关。尝试没有h1，它的工作原理，但我需要h1那里。

我将如何消除.heads和.container1之间的差距？

http://codepen.io/techagesite/pen/Nqxzvg

.heads {
  background-color: #FF9000;
  padding: 0px 0px 0px 0px;
  border: 1px solid #FFC223;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: none;
  border-bottom-right-radius: none;
  border-bottom-left-radius: none;
}
h1 {
  padding: 0;
  font-size: 20px;
  font-family: Tekton Pro;
  color: #71A00E;
}
.container1 {
  width: 100%;
  border: 1px solid #006699;
  background: #0A3D5D;
  float: left;
  padding-bottom: 4px;
  padding-top: 4px;
  padding-right: 0px;
  padding-left: 4px;
  clear: both;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: none;
  border-top-left-radius: none;
}
p.normal {
  font-size: 21px;
  font-family: tahoma;
  color: #F7DF57;
}

<div class="heads">
  <h1>Some heading in here</h1>
</div>
<div class="container1">
  <p class="normal">Some text in here</p>
</div>

Answer 1

试试这个，在h1上添加margin:0;

  h1 {
            padding: 0;
            font-size:20px;
        font-family:Tekton Pro;
        color:#71A00E;
          margin:0;
        }

Answer 2

你可以从margin元素中删除h1：

h1 {
  margin: 0;
}

强烈建议阅读有关h1元素here和Collapsing margins的信息。

codepen

Answer 3

差距是由margin collaspsing引起的。总之，h1的下边距与头元素的下边距折叠。请注意，上边距未折叠，因为head元素的边距与h1的边距之间存在边框。

您可以使用各种技术来包含边距。最简单的方法是使用overflow: hidden（在此示例中，您可以添加颜色与背景颜色匹配的底部边框）。

.heads {
  background-color: #FF9000;
  border: 1px solid #FFC223;
  border-bottom: none;
  /* irrelevant rules removed */
  overflow: hidden;
}
h1 {
  font-size: 20px;
  color: #71A00E;
}
.container1 {
  width: 100%;
  border: 1px solid #006699;
  background: #0A3D5D;
  float: left;
  clear: both;
  /* irrelevant rules removed */
}
p.normal {
  font-size: 21px;
  color: #F7DF57;
}

<div class="heads">
  <h1>Some heading in here</h1>
</div>
<div class="container1">
  <p class="normal">Some text in here</p>
</div>

Answer 4

使用

*{
  padding:0;
  margin:0;
}

它将删除所有块元素的所有额外填充和边距。

Answer 5

我只是将内联块的显示属性添加到h1或p元素，它将删除所有div间隙。