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>

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。