文本行的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>

对于容器顶部和文本顶部之间的间隙，可以通过改变文本的行高和容器的高度来减少这种情况。

Answer 2

line-height param表示一条线的高度。如果您的font-size较大，则可能会有一些overflow，但默认情况下，我认为overflow设置设置为visible，因此文本溢出是可见的，如果没有其他阻止它