<pre>标签会在自身上方增加差距？

Question

我有以下HTML:

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

以下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;
}

但是我h2和pre无法摆脱的元素之间存在差距.

你可以在这里看到问题:http://jsfiddle.net/gaby/k5V8U/

Answer 1

里面的东西也<pre>保留了空白......

如果删除之间的空格<pre>并<code>像这样

<pre><code>

和

</code></pre>

它得到修复..

演示http://jsfiddle.net/gaby/k5V8U/1/

Answer 2

这是因为<pre>保留了空白区域.您的<pre>代码的开头和结尾都有空换行符.将其更改为以下内容:

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

您可能还需要删除<code>标记开头和结尾的换行符:

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

希望有所帮助!