Question

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

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

为什么pre的身高比code高得多？为什么pre不能简单地换code并匹配其高度？

<section>
  <h3>Property: Font-size</h3>
  <p>The font-size property speciﬁes 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块 - 左侧为css，右侧为框型号

突出显示

code块 - 左侧为css，右侧为框型号

Answer 1

自您发布问题以来，已经过去了几个月，而且披露已更改（甚至不清楚您使用的是哪个版本的披露）。

我的black.css显示了此CSS，其设置为max-height：

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

如果我在Chrome开发者工具中对其进行了修改，则可以看到高度发生了变化。

尝试在“开发人员工具”中单击“计算为CSS样式”以查看所有内容。我正在将Black主题与GitHub Highlight.js主题一起使用。您可以从那里向下钻取，以查看高度和/或填充物的来源：

什么导致pre高于reveal.js中的代码？

1 个答案: