H1导致div之间的差距答案

【问题标题】：H1 causing a gap between divsH1导致div之间的差距
【发布时间】：2015-07-21 20:21:35
【问题描述】：

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

【问题讨论】：

h1 正在添加底部边距.. 所以删除 h1 的边距..

标签： html css

【解决方案1】：

我只是在 h1 或 p 元素中添加了 inline-block 的显示属性，它会删除所有 div 间隙。

【讨论】：

请考虑添加代码/示例并更好地解释您针对该问题提出的答案。

【解决方案2】：

差距是由margin collaspsing引起的。总之，h1 的下边距与 head 元素的下边距折叠在一起。注意，上边距没有折叠，因为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>

【讨论】：

【解决方案3】：

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

h1 {
  margin: 0;
}

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

codepen

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

使用

*{
  padding:0;
  margin:0;
}

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

【讨论】：

"很遗憾，这不是一个好习惯。将规则应用于文档中的每个元素对渲染代理来说非常繁重，尤其是对于大型网页，这也会破坏很多良好的默认样式”。 source
您应该避免使用通用选择器 (*)，因为它可能会导致一些性能问题。
@JoelAlmeida 和 Mehdi Brillaud ：对于与通用选择器相关的性能问题，请read this 在大多数情况下影响可以忽略不计
@Joel Almeida 使用默认填充和边距不是一个好习惯。因为不同的浏览器应用不同大小的填充和边距。为了匹配设计，我们需要从元素 mitrax.net/webdesign/css/17-css-margins-and-paddings-problem 中删除默认填充和边距
@RoySonasish 问题不在于填充和边距，而是通用选择器。但就像 web-tiki 指出的那样，对性能的影响可以忽略不计，但有时您会删除按钮、提交等的样式，这可能会在以后给您带来问题。