删除h1和h2之间的空间

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是结果：

我希望缩小<h1>和<h2>之间的空间，我发现这样做的方法是将line-height中的h1设置为{{} 1}}。

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

我希望将文本保持在与更改0px之前相同的位置。我怀疑我使用div类函数错误。这更多是理论问题。

Answer 1

标题h1到h6默认为margin，因此您需要重置它，设置为：margin:0。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML标题标记在大多数浏览器中都应用了一些默认的CSS值。以下是默认情况下应用于它们的h1和h2的值，因此您需要覆盖margin-bottom的{​​{1}}和h1 margin-top 1}}如果您想减少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;
}

Answer 3

只需添加以下行

即可

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

Answer 4

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

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