コードタグが親タグの高さの100％を占めていない

Question

私のコードを強調するためにHighlightJSを使用しています。プレタグとコードタグの間隔をリセットするにはどうしたらいいですか？プレタグとコードタグのパディングと余白の両方を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>

Answer 1

またはあなたのコードから、この改行削除：このような

<pre> 
    <code class="html"> 

：

<pre><code class="html"> 

またはあなたがそれらの2のホワイトスペースのプロパティをリセットしますタグ：

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>