Question

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

我如何消除.container1和.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; }之间的差距？

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

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

Map

Answer 1

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

h1 {
  margin: 0;
}

强烈建议您阅读h1元素here和Collapsing margins。

codepen

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用

*{
  padding:0;
  margin:0;
}

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

Answer 4

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

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

Answer 5

I just add a display property of inline-block to the h1 or p element and it removes all the div gaps.

H1导致div之间的差距

5 个答案: