title: <pre> tag adds gap above itself?
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;h2&gt;Embed Code&lt;/h2&gt;
  &lt;pre&gt;
    &lt;code&gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
    var something = 'else';
  &amp;lt;/script&amp;gt;
    &lt;/code&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>But there's a gap between the <code>h2</code> and the <code>pre</code> element that I can't seem to get rid of.</p>
  
  <p>You can see the problem in action here: <a href="http://jsfiddle.net/gaby/k5V8U/" rel="noreferrer">http://jsfiddle.net/gaby/k5V8U/</a></p>