ソースコードはpreとcodeで囲う＆cssのmargin設定はpreで指定

ソースコードをHTMLに表示するときはcode要素に入れるが、そのcode全体もpre要素に入れるようにする。つまり

.abcde {
    font-size: 12px;
}

というソースコードをHTMLに表示するときは

<pre><code>
.abcde {
    font-size: 12px;
}
</code></pre>

とする。

ソースコードのmarginはpreで指定

preとcodeで囲ったソースコードのmarginは、codeではなくpreで指定する。例えば

pre {
  margin: 12px;
}

とする。

code {
  margin: 12px;
}

とすると、code全体ではなく最初の行だけがmargin指定される。