tag adds gap above itself?

I have the following HTML:

Embed Code
  
<script type="text/javascript">
  var something = 'else';
</script>
  

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/