code tag doesn't occupy 100% of the parent pre tag height

Question

I am using HighlightJS to highlight my code. How do I reset the spacing between pre and code tags (marked with the gray background)? I set both the padding and margin of both pre and code tags to 0 but that doesnt seem to work. Ideally I would like the code tag to occupy the complete height of the pre tag. Could you please let me know how I can do that?

 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

Or you remove this line break from your code :

<pre>
  <code class="html">

like this :

<pre><code class="html">

or you reset the white space properties of those 2 tags :

 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>