删除 h1 和 h2 之间的空间答案

【问题标题】：Removing space between h1 and h2删除 h1 和 h2 之间的空间
【发布时间】：2016-11-26 20:02:57
【问题描述】：

我偶然发现了一个我似乎无法以任何方式解决的问题，也许我以错误的方式使用divs？

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  line-height: 0px;
  text-align: center
}

<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

这是结果：

我想减少我的<h1> 和<h2> 之间的空间，我发现这样做的方法是将h1 中的line-height 设置为0px。

但是当我这样做时，我的整个页面会像这样向上移动：

我想将文本保持在与更改 line-height 之前相同的位置。我怀疑我用错了 div 类函数。这更多是理论上的问题。

【问题讨论】：

标签： html css html-heading

【解决方案1】：

标题h1到h6默认有margin，所以你需要重置它，设置：margin:0。

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
  margin: 0
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  text-align: center;
  margin: 0
}

<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

【讨论】：

【解决方案2】：

如果你只想为这个块分配边距，你不需要全局定义它，你可以使用内联 CSS 来做同样的事情

<h1  style="margin-bottom: 0">Hi</h4>
<h1  style="margin-top: 0">Select a group</h4>

【讨论】：

【解决方案3】：

HTML 标题标签有一些在大多数浏览器中应用的默认 CSS 值。以下是默认情况下应用于它们的h1 和h2 的值，因此如果你想减少你的h1 和 h2。

h1 { 
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
  margin-bottom: 0;
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  line-height: 0px;
  text-align: center;
  margin-top: 0;
}

<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

【讨论】：

【解决方案4】：

只需添加以下几行

.greeting h1 {
  margin:0px;
  line-height:35px;
}
.greeting h2 {
  margin:0px;
  line-height:35px;
}

【讨论】：