html - H1 额外的填充没有被移除

Question

您好，我正在尝试消除我的 h1 文本（文本上方和下方的空格）上的额外填充，我已经尝试了所有方法，但似乎没有任何效果。知道为什么吗？这是一个简单的示例，您可以看到每个 h1 文本的上方和下方都有额外的空间。

* {
  padding: 0;
  margin: 0;
}

.some-text {
  display: inline-block;
  border: solid 3px blue;
}

.some-text h1 {
  text-transform: capitalize;
  font-size: 60px;
  color: red;
  padding: 0;
  margin: 0;
}

h1 {
  padding: 0;
  margin: 0;
}

<div class="some-text">
  <h1>hello there</h1>
  <h1>cruel world</h1>
</div>

标签： htmlcss

Answer 1

这就是我解决它的方法：

* {
  padding: 0;
  margin: 0;
}

.some-text {
  display: inline-block;
  border: solid 3px blue;
}

.some-text h1 {
  text-transform: capitalize;
  font-size: 60px;
  color: red;
  line-height: 40px;
}

<div class="some-text">
  <h1>hello there</h1>
  <h1>cruel world</h1>
</div>

line-height问题是元素的默认值。