时间戳

首页 > 解决方案 > pre中的精确行高

html - pre中的精确行高

问题描述

我有一个<pre>元素，我需要行高正好是 15px（所以它与其他东西对齐）。

我玩过font-size，line-height但它们似乎以不明显的方式相互作用。有人可以解释它们是如何工作的，以及是否可以强制精确 15px 行高？

标签： htmlcsspre

解决方案

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

推荐阅读