css 删除h1和h2之间的空间

8oomwypt 于 2022-12-20 发布在其他

关注(0)|答案(4)|浏览(218)

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

.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类函数，这更多是理论问题。

css

来源：https://stackoverflow.com/questions/40822576/removing-space-between-h1-and-h2

4条答案

按热度按时间

jchrr9hc1#

标题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>

赞(0）回复(0）举报 2022-12-20

wz3gfoph2#

大多数浏览器都有一些默认的CSS值。以下是默认情况下h1和h2的值，所以如果你想减少h1和h2之间的间距，你需要覆盖h1的margin-bottom和h2的margin-top。

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

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-20

9lowa7mx3#

只需添加以下行

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

赞(0）回复(0）举报 2022-12-20

relj7zay4#

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

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

赞(0）回复(0）举报 2022-12-20

我来回答

css 删除h1和h2之间的空间

4条答案

相关问题

热门标签

最新问答