html - reveal.js 中pre 比code 高的原因是什么？

Question

我正在使用 reveal.js 构建幻灯片，但由于某些原因，pre block 占用的高度超出了应有的高度。在示例屏幕截图中，pre block 比 code block 高大约 90 像素。

但是 CSS 似乎没有说明原因。 pre 没有定义高度并且 code 没有那么多的填充，所以我不明白为什么它占用了这么多空间。

为什么 pre 的高度比 code 高那么多？为什么 pre 不简单地包装 code 并匹配它的高度？

<section>
  <h3>Property: Font-size</h3>
  <p>The font-size property specifies the size of the font.</p>
  <pre>
    <code data-trim>
      p {
        font-size: 12px;
        font-size: 1.5em;
        font-size: 100%;
      }
    </code>
  </pre>
  <p>Pixels</p>
  <p>"em"</p>
  <p>Percentage</p>
</section>

pre block 突出显示 - 左边是 css，右边是盒子模型

code block 突出显示 - 左边是 css，右边是盒子模型

Answer 1

自从您发布问题以来已经过去了几个月，并且 reveal 发生了变化(甚至不清楚您使用的是哪个版本的 reveal)。

我的 black.css 显示了这个 CSS，它有一个 max-height 设置:

.reveal pre code {
    display: block;
    padding: 5px;
    overflow: auto;
    max-height: 400px;
    word-wrap: normal;
}

如果我在 Chrome 的开发者工具中修改它，我可以看到高度变化。

尝试在开发人员工具中为 CSS 样式单击 Computed 以查看所有内容。我将黑色主题与 GitHub highlight.js 主题一起使用。您可以从那里向下钻取以查看高度和/或填充的来源: