Avoid the margin inside pre tag
<p>How to avoid the margin inside <code>pre</code> tag:</p>

<pre><code>&lt;p&gt;Some text&lt;/p&gt;

&lt;pre&gt;
    &lt;code&gt;
        Some code
    &lt;/code&gt;
&lt;/pre&gt;

&lt;p&gt;Some text&lt;/p&gt;

&lt;style&gt;
pre {
    background-color: rgb(255,247,229);
    border: 1px solid red;
}
&lt;/style&gt;
</code></pre>

<p><strong>The current output:</strong></p>

<blockquote>
  <p><a href="https://i.stack.imgur.com/fEwak.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fEwak.png" alt="enter image description here"></a></p>
</blockquote>

<p><strong>The desired output:</strong></p>

<blockquote>
  <p><a href="https://i.stack.imgur.com/jMIY7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jMIY7.png" alt="enter image description here"></a></p>
</blockquote>

<p>The current solution is to manually remove the indentation in the markup, like shown below. However, as I understand, it is not the optimal way.</p>

<pre><code>&lt;pre&gt;
    &lt;code&gt;
Some code
    &lt;/code&gt;
&lt;/pre&gt;
</code></pre>