Question

我有一个<pre>元素，我需要将行高精确地设置为 15px （以便与其他内容对齐）。

我玩过font-size和line-height，但它们似乎以非显而易见的方式进行交互。有人可以解释它们的工作原理，以及是否可以将行高度精确设置为15px？

Answer 1

好吧，事实证明@ÁlvaroGonzález的建议确实适用于我编写的一个简单测试用例。由于某种原因，它确实使我的实际文件中的行高达到了16px，所以还必须进行其他一些奇怪的事情。

此处显示10px，因为恰好Chrome中的默认行高似乎恰好是15px。

.ruler {
  width: 50px;
  height: 10px;
}

pre {
  margin: 0;
  line-height: 1;
  font-size: 10px;
}

<div style="display: flex; align-items: flex-start;">
  <div>
     <div class="ruler" style="background: red;"></div>
     <div class="ruler" style="background: green;"></div>
     <div class="ruler" style="background: blue;"></div>
     <div class="ruler" style="background: red;"></div>
     <div class="ruler" style="background: green;"></div>
     <div class="ruler" style="background: blue;"></div>
     <div class="ruler" style="background: red;"></div>
     <div class="ruler" style="background: green;"></div>
     <div class="ruler" style="background: blue;"></div>
  </div>
  <pre>
Why would
somebody mark
this question
as off-topic?
Whoever did
this you are
what is
wrong with
StackOverflow.
  </pre>
</div>