ソースコードを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指定される。