The padding of the `<code>` element is set to `1px 5px 1px 5px`, thus indenting the left and right by five pixels. This makes sense because inline `code` needs to be properly spaced and it'd look weird without the padding.

Why does it look weird when using it for multiple lines? Because `<code>` is not meant for that. `<code>` is for inline formatting. You should use `<pre></pre>` instead if you want a block element.

Compare the incorrect backtick / `<code>` variant:

    <code>multiline  
    foo</code>

Which renders as:

<code>multiline  
foo</code>

And the correct:

    <pre>
    multiline
    foo
    </pre>

Which renders as:

<pre>
multiline
foo
</pre>

Always use the latter for multiline code. You can of course indent code by four spaces as well to achieve the same thing. Or press <kbd>Ctrl</kbd><kbd>K</kbd> to indent selected text with our editor.


        multiline
        foo