code标签不占父pre标签高度的100%答案

【问题标题】：code tag doesn't occupy 100% of the parent pre tag heightcode标签不占父pre标签高度的100%
【发布时间】：2016-09-20 17:31:38
【问题描述】：

我正在使用 HighlightJS 来突出显示我的代码。如何重置 pre 和 code 标签之间的间距（标有灰色背景）？我将 pre 和 code 标记的填充和边距都设置为 0，但这似乎不起作用。理想情况下，我希望代码标签占据 pre 标签的完整高度。你能告诉我我该怎么做吗？

pre{
  background: gray;
  margin: 0 !important;
  padding: 0 !important;
}

code{
  margin: 0 !important;
  padding: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/color-brewer.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre>
  <code class="html">
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;title&gt;HTML Tutorial&lt;/title&gt;
      &lt;body&gt;

      &lt;h1&gt;This is a heading&lt;/h1&gt;
      &lt;p&gt;This is a paragraph.&lt;/p&gt;

      &lt;/body&gt;
      &lt;/html&gt;
  </code>
</pre>

【问题讨论】：

标签： html css syntax-highlighting highlight

【解决方案1】：

或者你从你的代码中删除这个换行符：

<pre>
  <code class="html">

像这样：

<pre><code class="html">

或者你重置这两个标签的空白属性：

pre{
  background: gray;
  white-space:normal;
}

pre code{
  white-space:pre;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/color-brewer.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre>
  <code class="html">
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;title&gt;HTML Tutorial&lt;/title&gt;
      &lt;body&gt;

      &lt;h1&gt;This is a heading&lt;/h1&gt;
      &lt;p&gt;This is a paragraph.&lt;/p&gt;

      &lt;/body&gt;
      &lt;/html&gt;
  </code>
</pre>

【讨论】：