Avoid the margin inside pre tag [duplicate]

Question

How to avoid the margin inside pre tag:

<p>Some text</p>

<pre>
    <code>
        Some code
    </code>
</pre>

<p>Some text</p>

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

The current output:

The desired output:

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.

<pre>
    <code>
Some code
    </code>
</pre>

Answer 1

You can try changing the default value of white-space for <pre> tag from pre to pre-line.

pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Read more about white-space on MDN.

pre {
  background-color: rgb(255, 247, 229);
  border: 1px solid red;
  white-space: pre-line;
}

<p>Some text</p>
<pre>
  <code>
    Some code
  </code>
</pre>
<p>Some text</p>