[SOLVED] How to remove unwanted indentation when trying to display code in html with <pre> tag?

How to remove unwanted indentation when trying to display code in html with <pre> tag?

I'm trying to display code in laravel blade template write with editorjs using <pre><code>....</code></pre> and i want to ask : why the first line in the displayed code has this big indentation ?

Click to see the render

Down below is my code :

@if ($content->type == 'code')
    <pre class="w-full m-0">
        <code class="block text-left p-4 border border-solid border-gray-500 bg-gray-100 rounded-md">
            {{ $content->data->code }}
        </code>
    </pre>
    <br>
@endif

I already tried to remove the <pre></pre> tag and keep <code></code> tag. The indentation disapear but with the other normal indentation. Tried to remove margin : no result.

Thanks in advance.

Solution

Finally resolved: The pre tag takes into account the lesser character such as spaces or line breaks. In my case, the problem was that in my code I had a line break in the <pre> tag.