html - 精确的线高

我有一个<pre>元素，我需要行的高度正好是15px（所以它与其他元素对齐）。
我玩过font-size和line-height但它们似乎以不明显的方式相互作用。有人能解释一下它们是如何工作的吗？如果有可能的话，它们的高度可以精确到15px？

最佳答案

好吧，事实证明，@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>     

关于html - 精确的线高，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54144314/