<pre> tag adds gap above itself?

Question

I have the following HTML:

<h2>Embed Code</h2>
<pre>
  <code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;
  </code>
</pre>

And the following CSS:

h2 {
  background:#1e7ca2;
  font-weight: 100;
  font-size: 1.25em;
  padding: 10px 15px;
  margin: 0;
  color: white;
}
pre {
  margin:0;
  padding:0;
}
code {
  margin: 0;
  padding: 0 30px;
  display: block;
  background: #1d1f20;
  color: #839496;
  font-size: .85em;
  line-height: 1.6em;
}

But there's a gap between the h2 and the pre element that I can't seem to get rid of.

You can see the problem in action here: http://jsfiddle.net/gaby/k5V8U/

Answer 1

What ever is inside <pre> preserves the whitespace as well..

If you remove the whitespace between <pre> and <code> like this

<pre><code>

and

</code></pre>

it gets fixed..

Demo at http://jsfiddle.net/gaby/k5V8U/1/