文本行的 CSS 高度

Question

我想知道决定下图中所示行为的参数是什么；在文本之前有检查员突出显示的空格，在文本“溢出”之后有 h1 高度。

Answer 1

line-height: 42px 决定了元素上显示的高度。

至于轻微的溢出，这可能是由于字体大小大于行高，或者是由于您使用的字体系列。

我建议稍微减小字体大小、减小行高或更改您正在使用的字体系列。

举个例子，font-family: fantasy 将使用您拥有的相同参数正确地适应容器。

这是一个工作示例:

h1,
h2 {
  font-size: 42px;
  line-height: 42px;
  height: 42px;
  background-color: #ccc;
}

h2 {
  font-family: fantasy;
  margin-top: 15px;
}

* {
  margin: 0;
  padding: 0;
  border: none;
}

<main class="container">
  <hr class="spacer spacer-10">
  <h1>Lorem Ipsum</h1>
  <h2>Lorem Ipsum</h2>
</main>

至于容器顶部和文本顶部之间的间隙，可以通过更改文本的行高和容器的高度来减少。