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