How can I remove leading whitespace in my <pre>/<code> block without removing indentation in my HTML?

html css pre

Doug Smith · Jul 31, 2015 · Viewed 16.6k times · Source

I have the following HTML:

<body>
    Here is some code:

    <pre><code>
        Here is some fun code!    
    </code></pre>
</body>

But when I preview it, because the code is indented, the pre is all out of whack. I can fix that by bringing the contents back against the indent, but it looks silly. Can I make that above text look non-indented?

Answer

You could try this maybe:

pre, code{
    white-space:normal;
}

Fiddle

How can I remove leading whitespace in my <pre>/<code> block without removing indentation in my HTML?

Answer

Related questions