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。

Answer 2

它不是填充或边距，它是该字体的默认间距。您可以根据需要使用line-height进行调整

* {
  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;
  line-height: 40px;
}

h1 {
  padding: 0;
  margin: 0;
}

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

行高也可以减少一个单位，这样新的行高将为

line-height =计算得出的font-size乘以提供的单位减少线高。

示例

line-height: .7;
font-size: 60px

在这种情况下，line-height将是60px * .7 = 42px;

H1多余的填充未删除

2 个答案: